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:

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

First, let's install the Styled Components library:

terminalnpm install --save styled-components

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

App.jsimport 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:

App.jsconst 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:

App.js<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:

App.jsconst 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:

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

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

Calculator.jsimport 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.