Styling with Styled Components in React

In previous tutorials we looked at styling techniques using global CSS and inline styling. In this lesson we will work with a more efficient approach for large applications - using the styled-components library.

So, let's take our component without CSS styles that we used in previous lessons:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

First, let's install the Styled Components library:

npm install --save styled-components

Then we import the package we need into the App component:

import styled from 'styled-components';

Now we can wrap tags in styles and apply them as React components, but with styles attached directly to JS. This approach is also called CSS in JS.

Let's style the first paragraph. To do this, before the App function, after the import lines, we create the Text1 component. In the styled object from the library, we need a paragraph, so we write styled.p. Then, in the template line, we list the CSS styles we need - like in regular CSS:

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

As you can see, we use pure CSS here in the form of template strings, which is very convenient. In a similar way, we can use media queries, pseudo-elements, selectors and other CSS functionality.

Now, inside the App component function, we will replace the p tag with the Text1 component we created with CSS styles:

<Text1>text</Text1>

We will style the second and third paragraphs in a similar way. To do this, we will create components Text2 and Text3:

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

And finally, let's style our div. To do this, create a component and name it Container:

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

Let's replace all our tags with the created components:

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

This approach allows you to create reusable components with styles.

If you open the generated markup in the developer panel in the browser, you will see that each component has its own unique classes generated. So, we no longer need to worry about conflicts between the classes of individual components.

You can style components in a similar way using, for example, the Emotion library.

Take the React component you made in the task for the last lesson, style it using the Styled Components library.