Styled Components + Styled System = Super Power Part III

S

This is part 3 of this series Styled Component and Styled System. If you haven’t read Part 1 & Part 2 please go through them first. It is prerequisite before starting this part.

In previous part we used the help of style system to create complex components with greater flexibility and power. Now we are going to enhance that further by adding few tools to our arsenal. The first thing we need to learn is theming. Theming is important in projects because that allows you to quickly change look and feel of the project. You can even allow your users to choose different colors and styles.

THeming:

Let’s create a theme object that defines the look & feel of the whole project. Before that we need to add a ThemeProvider to our root component. Let’s go ahead and add that:

import { ThemeProvider } from "styled-components";
import App from './App';
import theme from './theme';

const Root = () => (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)

Here, App is the component where your application resides. We are now wrapping that App component by a ThemeProvider and passing a theme object to it. We haven’t yet created the theme object. So, let’s go and create a theme object.

const colors = {
  red: "#F44336",
  blue: "green"
};
export default { colors };

This looks very simple because it is simple. The keys inside colors object resolve to it’s values inside our components. So, to be clear I created two colors one is red and another one is blue. The red color has a different shade of red than standard one, but the blue one has value of green which might seem odd. This for explaining that there is no rule for having the key similar to value. If in your project if you try to use blue, it will actually resolve to green. Some people prefer to use keys like primary, secondary etc. Some like to give them names. It’s your choice ultimately. Now I am going to use a simple Text component ( you already know how to create this using styled system).

<Text color="blue">This is text</Text>;

styled-components+styled-system-text-component

The color blue is ultimately resolved to green as defined in theme. This example is for colors you might want to setup margins, paddings, fontSizes, layouts, borders, etc. To understand which of key to use for each check this table. Remember the keys inside colors doesn’t matter but the keys inside the final object matters. The themeProvider will look for predefined keys to add it to theme. So, If you want to have custom colors, you should provide colors object to theme, if you want custom font families, you should provide fonts object to theme. The keys inside those doesn’t matter.

Note: The theme values are resolved automatically when you are using styled system, however you want them to use it with styled-components you have to handle it yourself.

responsiveness:

It’s important in projects that your app or website is responsive across all devices. To achieve this your components must be able to adapt to the screen sizes and change styles based on that. With CSS we often do this through media queries. It’s similar here, but you just need to make some tweaks. Let’s make our Text component responsive. By default breakpoints are set at 3 positions 40em, 52em, 64em‘. You can change this by setting your own breakpoints in theme object. You can read about it here.

 

<Text fontSize={[4, 6, 7]}>Hello World</Text>

The font-sizes 4, 6, 7 are being resolved from theme object. You can look them up here. Now our text component is responsive. As the screen size increases the fontSize increases and vice versa. It’s up-to you to decide the best font-size based on your design and branding.

By this point you should be able to create reusable, flexible components in React using styled system and styled components.

Challenge:  Create a small personal ui-library in React / React-native that you can use in your personal projects.

 

About the author

Shiva Pandey

Shiva is a Software Engineer with more than 5 years of experience in different industries like banking, services, software development, and startups. His passion is to create solutions that help others to work faster. He is a problem solver and enforces best practices within the team. His career plan is to become a Principal Software Engineer. In his free time, he likes to play music, football, and video games.

10 comments

  • I like the helpful info you provide in your articles.
    I will bookmark your blog and check again here frequently.
    I’m quite certain I’ll learn plenty of new stuff
    right here! Best of luck for the next!

  • If you wish for to increase your knowledge just keep visiting this site and be updated with the latest information posted here.

  • Hi! Would you mind if I share your blog with my zynga group?
    There’s a lot of people that I think would really appreciate your content.
    Please let me know.

  • Good way of describing, and fastidious post to obtain information on the topic of my presentation subject,
    which I am going to present in academy.

  • I almost never leave a response, however, after reading a few of the responses on this page Styled Components + Styled System
    = Super Power Part III | Shiva Pandey. I actually do have some questions for you if you tend not to mind. Could it be just me or do some of the comments look like they are coming from brain dead visitors? 😛 And, if you are posting at additional sites, I’d like to keep up with you. Could you list of the complete URLs of all your shared pages like your LinkedIn profile, Facebook page or twitter feed?

Recent Posts

Archives

Categories

Shiva Pandey

Shiva is a Software Engineer with more than 5 years of experience in different industries like banking, services, software development, and startups. His passion is to create solutions that help others to work faster. He is a problem solver and enforces best practices within the team. His career plan is to become a Principal Software Engineer. In his free time, he likes to play music, football, and video games.

Get in touch

Quickly communicate covalent niche markets for maintainable sources. Collaboratively harness resource sucking experiences whereas cost effective meta-services.