Part 2: Configuring Styled Components

So far, our template already has:

• Compatibility between multiple editors
• Automated Code Standardization
• Automated code beautify

Now, we will configure extra features for our project. One of them is the so-called ** Styled Components **, which changed the way we write CSS / SCSS in React projects. Come on?

What is Styled Components?

This is a package that appeared around 2016 and came from the need for CSS to adapt to the componentization proposed by React in its creation. The idea of ​​Styled Components is to create React components with their individual CSS and that can be easily replicated on other pages and other projects.

In the example below, we see the construction of a component made in Styled Components with structuring of themes and application in a JSX.

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0.5em 1em;
  padding: 0.25em 1em;
  ${props => props.primary && css`
    background: palevioletred;
    color: white;
  `}
`;
const Container = styled.div`
  text-align: center;
`
render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

Cool, huh? We will configure it in our template.

Installing Styled Components

To install the package, simply execute the command below:

yarn add styled-components
# Right after
yarn add @types/styled-components -D

There, it's already installed. Now, we will use a very special configuration that Styled Components makes available to us, the configuration of global styles.

Configuring Global Style

The Global Style configuration helps us to configure a CSS common to all pages. This is a common practice among developers to override certain default browser settings, in addition to configuring default fonts and colors. Global Style is also a React component that will be imported into our App.tsx.

Let's create, inside the folder src a folder called styles and inside it the file global.ts.

To configure the global style, we just import this configuration of the styled components and export the functional component created:

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
`;

Here, the configuration is up to you, but I show below the common configuration I use in my projects.

import {createGlobalStyle} from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }
  body {
    background: # 312e38;
    color: #fff;
    -webkit-font-smoothing: antialiased;
  }
  body, input, button {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
  }
  h1, h2, h3, h4, h5, h6, strong {
    font-weight: 500;
  }
  button {
    cursor: pointer;
  }
`;

Activating Global Style

In our App.tsx, just import our component and insert it in the return of the App.

import React from 'react';
import GlobalStyle from './styles/global';

function App () {
  return (
    <>
      <GlobalStyle />
    </>
  );
}

export default App;

Ready! Another configuration made in our template. It is available on github.

In the next article, we will configure react-app-rewired which overrides the webpack settings.

I'll wait for you there!
Thanks for reading!