Building design system with styled-components and styled-system III

B

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.

32 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?

  • Hello great blog! Does running a blog similar to this take a lot of
    work? I have no understanding of programming however I had been hoping
    to start my own blog soon. Anyway, should you have
    any suggestions or tips for new blog owners please
    share. I understand this is off topic however I just wanted to ask.
    Cheers!

  • Hi! I just would like to give you a huge thumbs up for the great information you
    have got here on this post. I will be coming back to your
    web site for more soon.

  • You have made some good points there. I looked on the internet for more info about the issue and found most
    individuals will go along with your views on this site.

  • After looking into a few of the blog posts on your website,
    I truly like your way of writing a blog. I saved as a favorite it to my bookmark webpage
    list and will be checking back in the near future.

  • Howdy! This post couldn’t be written any better! Reading this post reminds me of my good
    old room mate! He always kept chatting about this.
    I will forward this write-up to him. Fairly certain he will have a good read.
    Thank you for sharing!

  • Its like you read my mind! You seem to grasp a lot about this, like you wrote the book
    in it or something.This is great blog.
    An excellent read. I will definitely be back.

  • Your style is really unique compared to others I have got read stuff
    from. Be grateful for posting when you’ve got the chance, Guess I
    will just bookmark this web site.

  • Wow, amazing blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is great, let alone
    the content!

  • Hey I am so grateful I found your web site, I really found you by
    error, while I was researching on Askjeeve for something else,
    Anyways I am here now and would just like
    to say kudos for a tremendous post and a all round interesting blog (I also love
    the theme/design), I don’t have time to look over it all
    at the minute but I have bookmarked it and also added your RSS feeds, so when I have time I
    will be back to read a lot more, Please do keep up the superb job.

  • I’m stiⅼl learning from yоu, while I’m trying to achieve
    my goals. I ϲertainly enjoy reading еverything tһat is posted
    οn yoսr site.Keep thе posts comіng. I liкеd it!

  • I blog quite often and I truly thank you
    for your information. This great article has really peaked
    my interest. I’m going to book mark your website and keep checking for new details
    about once per week. I opted in for your Feed too.

  • This is very interesting, You’re a very skilled blogger.
    I have joined your feed and look forward to seeking more of your
    great post. Also, I’ve shared your site in my social networks!

  • Hi there! Do you use Twitter? I’d like to follow you if that
    would be ok. I’m definitely enjoying your blog and look forward to new updates.

By Shiva Pandey

Recent Posts

Archives

Categories

Shiva Pandey

Get in touch

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.