💅 Styled-Components in Action

Styled-Components is a new CSS tool, created by and , which helps you organize CSS in your project. It also works well with React Native. In this article, I will walk you through the main concepts of Styled-Components along with coding examples. Max Stoiber Glen Maddern React Three main goals of Styled-Components First of all, let’s talk about the purpose of Styles-Components and the benefits you will gain from using it. — Most of the time, a dumb component always has its own small file related. So, you need to create two files every time you want to create the dumb component. This seems to be fine at the beginning, however, when your project is getting bigger, you will end-up with a whole bunch of files. Styled-Components allows you to write CSS directly inside your component, which perfectly solved this problem. Getting rid of the mapping between styles and components style.css — Small components can easily be reused and tested. By using Styled-Components, you can easily build a small component and extend its capability with . Building small and reusable components props — Everyone might have encounter the specificity clash problem before. For example, you just wanted to add a margin to a specific paragraph, but it unintentionally impacts the other paragraphs. You can easily solve this problem by applying a CSS class only once. Styled-Components is actually doing this for us. It automatically generates a unique class name and pass it to our component. Reducing the risk of specificity clash Let’s get our hands dirty It is time to see how it works in action! You are going to create a very simple Gallery application, let’s call it . Mystagram Mystagram — styled-components tutorial If you would like to follow along with this tutorial, which is really recommended, please clone the project by doing: styled-components-tutorials $ git clone $ cd $ git checkout scratch https://github.com/lvarayut/styled-components-tutorial styled-components-tutorial Install all dependencies & Start developing $ yarn install$ yarn start Reusable Title component Let’s start with our simple title using tag. Mystagram h1 You just created the component with the goldenrod color. You can easily reuse this component when needed. Notice how we wrote the fully CSS wrapped in the back ticks inside our file. This is a new feature in ES6, a.k.a ES2015, called a . Title JavaScript Template literal notation As you learnt from the previous section, Styled-Components automatically generate a unique class name and pass it to our component. Here is the final result , you could open your inspect element and take a look yourself! Mystagram Now, you have the component, however, it is not very reusable because the color is hard coded. What if the component could receive a property and set the color dynamically. It absolutely can! Title You just modified the component to accept the property. We then can pass a lovely color to the component, otherwise the color will be set to by default. Title color goldenrod Third party components So far, you have seen how to style a primitive element, . You might be asking what if we already have a component, might be from a third party library or from your own, and want to style it. Here we are going to style our component. h1 App accepts a component as an argument. You just styled the App component with , , and properties. We also put more styles to the component to make it prettier. styled width height text-align Title Note that when you style a component, you need to make sure that your component has attached to its DOM. Because after Style-Components generated a unique class name, it will pass the class name to your component. If you are not sure whether a third party component has or not, you can simply wrap it up in your own tag. this.props.className this.props.className Global style We sometimes need to set a global style to the entire application, such as , , and etc. Style-Components provides an function to help us style globally. font-family background-color injectGlobal Gallery and Thumbnail components Let’s get more familiar with Styled-Components by creating the Gallery and the Thumbnail components. You just created one Gallery that wrapped five Thumbnail components. Optional Thumbnail border Again, we might not need to show the Thumbnail border all the time. We need an ability to say which Thumbnail should have border. Let’s create a property called . showBorder For the sake of simplicity, we showed the border for the Thumbnail whose index is an even number. Reuse styles with “css” Imagine, if you need to reuse the border style somewhere else, it is a good idea to separate the style to its own file or variable. You can do exactly this by using function. css If you declared the variable with a normal string without using , the props will not work because Styled-Components will include your style by using function without any features border css toString() string interpolation Wrapping up We just built a simple application which gave us the overview of the Style-Components. You now understood what the main proposes of Style-Components are, and how to use it in your own application. There are still some functions that have not been covered in this article, for example, and , but after you got the main concepts, they are pretty easy to be understood. I encourage you to check them out ;-) keyframes ThemeProvider repository — has very good documentation of all functions and also use cases. styled-components — explains how uses Template literal notation behind the scene. The magic behind styled-components styled-components https://upscri.be/hackernoon/