A Quick Start to Styled-Components
Part 2: Adding Dynamic Styling to Your Applications
If you have just started to implement styled-components into your React application and are wondering why you even decided to dedicate time to learning this library, you have come to the right place!
Using styled-components in your applications will allow you to add greater functionality and easier customization to the styles you choose to add.
If you are completely new to styled-components or are looking to get started with this library, I strongly recommend that you read “A Quick Start to Styled-Components” first! In that article, I go over some general information about the library as well as how to get started with using styled-components in your applications.
In this article, I plan to cover some more advanced, albeit necessary, features of styled-components that will provide a more robust styling experience to your applications. I will cover passing Props into your styled-components, using State to dynamically render styles, and adding or styling pseudo-classes.
To demonstrate these three features, I will be using a very simple React application that consists of a button. The button will toggle the application between light-mode and dark-mode.
Passing Props to Styled-Components
As mentioned in “A Quick Start to Styled-Components,” one of the joys of using styled-components is the ability to pass props to your components in order to dynamically render styling into your application. By passing in props, you can reuse your components as a template, while being able to change the rendered style based on whatever prop is passed in. What makes this more powerful is that since you can change styles based on passed-in props, you can also change your application’s design based on the changing state within your components and application. You will see this better in our light-mode vs. dark-mode example later.
In order to update your components’ style via props, you need to use JavaScript’s string interpolation syntax along with a callback function. For example, if you determined that every important header will have a font-color of blue, which we will call our primary color, and every other header color will be red, you can pass a prop into your styled headers called Primary to render this dynamically. This is how we would implement this:
import styled from "styled-components"const StyledTitle = styled.h1`
font-color: ${(props.primary) => props.primary ? "blue" : "red"
`export default function App() {
return (
<div>
//This will display a Blue Title
<StyledTitle primary={true}> Important Title </StyledTitle>
//This will display a Red Title
<StyledTitle primary={false}> Other Title </StyledTitle>
</div>
);
}//Note: You could have made use of object destructuring in the
//callback function like this:
//font-color: ${({primary}) => primary ? "blue" : "red"
Using State to Dynamically Render Styles
Now that you know how to use Props to control which styles render in your styled-components, it is a good time to discuss how you can use State to display different styles. Doing this is as simple as passing State as a Prop to your styled-components. Since State is changing as data changes in your application, we can make the styles in our components reliant on the changing State.
To demonstrate this, I will create a very simple react application that consists of a title and a button. The button will toggle the State of our lightMode variable between true and false. Initially, lightMode will be set to true and our application will have a white background with black text. When you click the button, lightMode will be set to false, putting our application into “darkMode”, which will change the application’s background to grey with blue text.
Please use the following CodeSandbox to view the code and play around with passing in state to your styled-components.
Adding Pseudo-Classes/Elements to Styled-Components
Now that you have learned how to add dynamic styling into your React apps, you might be wondering if styled-components account for pseudo-classes or pseudo-elements. Rest assured, you can still add pseudo-classes and elements into your styling using styled-components.
If you have never heard of pseudo-classes here is a brief description given by MDN Web Docs:
Adding pseudo-classes in your styled-components is relatively similar to adding them in your CSS Style Sheets. To add pseudo-classes, all you need to do is add &: and the name of the pseudo-class followed by {} containing your styles. Continuing with the important vs non-important header example from above, if I wanted to make the “important titles” change to purple upon hovering, and the “unimportant titles” change to yellow upon hovering, I can add the following pseudo-classes to our code.
import styled from "styled-components"const StyledTitle = styled.h1`
color: ${({primary}) => primary ? "blue" : "red"
//This will add the pseudo-hover class to your headers
&:hover {
color: ${({primary}) => primary ? "purple" : "yellow"
}
`export default function App() {
return (
<div>
//This will display a Blue Title that changes to purple
//on hover
<StyledTitle primary> Important Title </StyledTitle>
//This will display a Red Title that changes to yellow
//on hover
<StyledTitle> Other Title </StyledTitle>
</div>
);
}
//Note: Passing in primary is the same as primary={true} and leaving
//primary out all together is the same as primary={false}
Of course, we can also do this with State passed in for our Prop. Please use the following CodeSandbox to view the code and play around with passing in state to your styled-components to dynamically render pseudo-classes.
Conclusion
Now that you have learned how to add greater functionality to your styled-components, you are ready to take your React styling up a notch! Using props, and state, you can now dynamically change how your React applications look and feel.
Still, there are many features of styled-components that I have not covered. I recommend looking into the CSS function as well as the ThemeProvider component. I invite you to explore this magnificent library further and play around as much as you can when styling your applications.
Happy coding!
