Photo by Hello I’m Nik 🇬🇧 on Unsplash Styled Components are awesome and a perfect match for React. They really are. And they’re also easy to understand … really. In this article I will break down everything you need to know to get started (and beyond started) in three parts. Non-technical and easy explained. If you know these three things you know enough to use Styled Components in your project without hassle. The three things are: 1. How to create and use a Styled Component. 2. How to modify your CSS conditionally with props 3. How to create Global Styling. I’ll go through them one by one now. 1. How to create and use a Styled Component I’ll dive right into it. First you have to install Styled Components in your project. Do it by typing : npm i styled-components Now you’re good to go. You can use Styled Components in your projects. Below are some code that I’ll explain below it. Have a good look at it and continue reading below the code. React ; styled ; StyledLogin = styled.div ; StyledInput = styled.input ; Login = ( <h2>Login</h2> <StyledInput type="text" placeholder="email" /> <StyledInput type="password" placeholder="password" /> <button>Login</button> </StyledLogin> ); export default Login; import from "react" import from "styled-components" const ` display: flex; align-items: center; flex-flow: column; width: 200px; height: 200px; margin: 0 auto; border: 2px solid #000; border-radius: 20px; background: #eee; h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; } button { background: green; color: #fff; padding: 10px; margin: 5px; width: 150px; border: none; border-radius: 10px; box-sizing: border-box; } ` const ` border: 1px solid #000; border-radius: 10px; padding: 10px; margin: 5px; width: 150px; box-sizing: border-box; ` const => () < > StyledLogin The above code will create a component called Login that looks like this: Nothing fancy, nothing special. Just a Login component to help us understand Styled Components better. Ok … The first thing you’ll notice in the above code is that we have to somehow tell React that we want to use Styled Components. We do this by importing it like so: styled ; import from "styled-components" Now we have imported an object called that we can use to style or components. This object has different properties that you can use depending on what you want to style. If it is a div, like in our example, you just simply access the div property on the object. Like so: styled styled styled.div If you want to style a button you can simply type instead. Or if it was an h2 tag you can type … you get the point! styled.button styled.h2 These properties are holding functions that you can call with . Meaning that we can send in the data to this functions by using back ticks and then put our CSS between these back ticks (``). You also create a const to hold the Styled Component. So … If we want to create a Styled Component for our Login component we just write below code: tagged template literals StyledLogin = styled.div ; const ` display: flex; align-items: center; flex-flow: column; width: 200px; height: 200px; // And more CSS code below ` In short; To create styling for a div element with Styled Components you just use this syntax: SomeName = styled.div ; const ` CSS code goes here … ` Then you can just use it as a regular component: <SomeName> Your other code here … < /SomeName> You can create as many of these Styled Components as you need. In the above example I’ve created two Styled Components; One that’s called and one that’s called StyledLogin StyledInput. One more thing about creating a standard Styled Component that’s good to know is the nesting part. Styled Components have the ability to nest styling just like you can do in for example SASS. You can see in the above code that I have nested my styling for the and the elements. This is great in so many ways! It will make your code a lot more structural and clean. You can easily see what styling belongs to what component. You are also isolating the styling to only that component meaning that other and elements in your App won’t be affected. h2 button h2 button So, when it makes sense, use nesting to style elements. It doesn’t always make sense though. You don’t have to create a completely new Styled Component for every little element. That’s when nesting like this come in handy instead. That’s one … two to go. 2. How to modify your CSS conditionally with props. Styled components can receive props. Just like a regular Component. By passing in props to your Styled Component you can do some conditional CSS styling. Smooooooth … 🏄♂️ Let’s say we want to change the color of the password input field depending on if the user typed in the wrong password or not. Ok, I realize that this is a really simplified solution and there would be much more than a simple prop involved in stuff like this. But for the sake of this tutorial article, let’s say that we do it like this. If we have a prop that’s called set to false we make our textbox red instead. Let’s have a look at the below code. I’ve intentionally left out the styling code for the whole Login component to save space. So let’s pretend that that’s there and is the same as above. correct StyledInput = styled.input ; Login = ( <h2>Login</h2> <StyledInput correct={true} type="text" placeholder="email" /> <StyledInput correct={false} type="password" placeholder="password" /> <button>Login</button> </StyledLogin> ); const ` border: 1px solid #000; border-radius: 10px; padding: 10px; margin: 5px; width: 150px; box-sizing: border-box; background: ; ` ${prop => prop.correct ? : } 'white' 'red' const => () < > StyledLogin This will give us this result: First, take a look at the component. And the components. I’ve created a prop thats called and passing in and to the two different components. The one that gets the value will be shown in red. To access this prop value in your Styled Component CSS you can use below code: Login StyledInput correct true false true background: ${prop => prop.correct ? : }; 'white' 'red' You just simply create a ternary operator inside an arrow function surrounded by ${} telling this Styled Component to select the white color if is . And use the red color if is . Simple as that! prop.correct false prop.correct true You can do this with any CSS property you want! ✌️And that’s how you do conditional CSS with props in Styled Components. Two down … one to go. 3. How to create Global Styling. The last essential thing you need to know to use Styled Components is to create global styling. Global styling is achieved by using a special function for this purpose from the Styled Components library. It’s called and you import it like this createGlobalStyle : { createGlobalStyle } ; import from 'styled-components' Then you can create a Global Styled Component like this: { createGlobalStyle } ; GlobalStyle = createGlobalStyle ; App = { <> <Login /> import from 'styled-components' const ` body { background: #000; color: #fff; } ` const => () < /> GlobalStyle } </> You just place the global style component at the top level of your application. Then, it will use the style throughout your App. In this case I assume that the top level Component is named App. You can also use props and do some conditional CSS in global Styled Components. Just like the regular Styled Components. Conclusion This is it! There’s more to Styled Components than this but I think that this really are the essentials that you need to know for using Styled Components. If you’re interested in learning more I highly recommend that you go to the website and read the docs there. https://www.styled-components.com/docs/ Also, thank you for reading this post. I’m a Developer from Sweden that loves to teach and code. I also create courses on React and Gatsby online. You can find me on Udemy. Just search for Thomas Weibenfalk or hook me up on Twitter @weibenfalk I also have a Youtube channel were I teach free stuff, check it out here
