Styling is a vital aspect of front-end web development. It helps to create a great user experience and gives a web application a clean layout. There are a ton of style libraries and frameworks out there, but in this article, we’ll be looking at how to style React web applications.
What is styled-components?
Advantages of Styled-Components
- Easy to learn
- Prevents class name collisions with unique class names
- Dynamic and adaptive styles
- Component-level styling for easier debugging
- Server-side rendering support
- Sass style support
- Custom style theme support
- Simple theme setup
Getting Started with Styled-Components
This section will explore how to add the styled-components library to your React application, style React components, and add light and dark themes. First, create a React app and install the styled-components library by running one of the commands below:
Once we install the library, we will start styling the application.
Styling a React App with Styled-Components
Styled-components lets you add styles to React components with the react inline stylestyled interface. You'll use tagged template literals to pass style rules to the component.
import styled from "styled-components";
The component name follows the React naming convention. Access the DOM element you want to style from the styled object and pass the style rules within template literals.
Styling a real-life project's nav will look similar to this code block:
In the code block, the opacity style value depends on the show prop. If show is true in MyComponents, the div's opacity is 1, else 0. Use createGlobalStyle for global styles that are not tied to a specific component.
The code block above creates a global styled component that we can use to style components outside its scope.
Styled-components supports multiple themes for React apps; use ThemeProvider to provide the theme via a context API. To do so, pass a theme rule object as a value to its theme prop, access the theme rule in all styled-components using prop.theme, and set up a theme object in the theme folder.
The theme object exported as the default in the code block above has two properties: dark and light. We’ll pass the proper property to the ThemeProvider component based on the selected theme. The following action will wrap the application with ThemeProvider:
From the code block above, we have the currentTheme state; this controls the theme rule to pass to ThemeProvider. The ToggleButton component allows us to toggle between light and dark themes.
Using Themes in Styled-Components
To use the theme rules in the style component, we will need to access the theme from the props object:
In the code block above, we are destructuring the theme property from the props object. This will give us access to all of the theme rules. Using the code sample above, we have:
This will apply the primary color from the current selected theme's theme rule.
This article explored how to add styled-components to your React application and create component-level styles. In addition, we looked at how to create light and dark themes for React applications using ThemeProvider. If you would like to look further into styled-components, check out the official documentation. You can also find the complete code for the project used in this article in my Github Repository or test the live version here: https://theme-sc.vercel.app/. Want to learn more? Check out this article about how to implement drag and drop in React.