React — The beauty of styled components

Importing styled components into your React applications can bring peace and mind to styling your front-end. Before styled components I would struggle to maintain .css files with 100+ lines of code. When you factor in the many components that any React project may have it can become incredibly difficult and overwhelming. My preferred method with styled components, is to extrapolate each component to its own styled file and import that file.

So to get started with styled components we need to install it.

npm install --save styled-components

Once installed we can get started with style components. There are many ways to take advantage of style components but my preferred method is to create a folder a styled folder that will hold all the styles.

Inside the src there are two files, a “GlobalStyles” and “HomeStyles”. The “GlobalStyles” is a convention that acts as an index.css for the project. I used this to set global fonts, variables and other general application styling.

createGlobalStyle must be imported from styled-components.

Then I basically follow this setup for the all the other style files. If I create a Home component, then I follow suit and create a HomeStyles component. In that file I import styled and export a variable called HomeStyles thats equal to a styled.div . I find that this does a great job of separating concerns and creates a very clean coding directory. Some other prefer to just put the styled.div outside of the function component but in the same file, this is also not a bad idea. Here is an example of the component.

Also, styled components accept nesting, so if I wanted to target the <p> tag thats a child of a <div> I can.

.div {
 background-color: blue;
 margin: auto;
  p {
    font-size: 24px;
    color: white;
    }
}

This is compilable code and is a great resource to take advantage of, but more on that in another blog.