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>;
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.