Ways to style in React

Recently, I have been creating a few clones using React and have encountered various ways to style in React. It was confusing to me as to why there was not a unique way to do so, but it gives more options to the developers and some methods would not be appropriate depending the situation.

In this article, I am going to explore the different methods of styling such as:

  • Inline Styling
  • styled-components
  • CSS Modules

Method #1: Inline styling of React components

If you are familiar with basic HTML, you will know that it is possible to add your CSS inline. This is similar in React.

We can add inline styles to any React component we want to render. These styles are written as attributes and are passed to the element.

facebook clone

Here in my facebook clone, I used some inline styles to add a fontSize equal to large to the 5 Icons that will be display at the top of the page. Without this inline CSS, the icon would look smaller which is not what I was looking for.

I am also adding for the purpose of this article an inline CSS to create a new text, showing how to write multiple items to the object that we want to add

Adding some text to the header
Result showed in localhost

Here I added “Adding some inline CSS” in a box to the header for both the div and the h2 tags. There are 2 curly brackets after your element, the first curly bracket injects JavaScript into JSX and the inner curly brackets creates an object literal. The styles are passed as object literals to the element.

The next thing to note is that the properties are separated by a comma. This is because what we are passing is an object. Because it is a JavaScript attribute, the attributes are written in camelCase and not separated by a dashes.

Now, in the code above, I just added a few properties to the elements I styled. However, imagine I had to add more and more styles to the element. This is where the inline method breaks down because it will not look clean.

A way to correct that is to create a style object variable. This object is then passed to the element as an attribute.

Style object variable

Here I added a CSSDiv variable and a CSSH2 variable and passed them as argument to the element. This gives the same end result but allows to write CSS more easily if we need to give it more options.

Method #2: styled-components

With styled-components, we can write actual CSS in our JavaScript file. This means you can use all the features of CSS — like media queries, pseudo-selectors, nesting, etc. — in JavaScript.

First, we need to install it, so run the following in your React app’s directory:

npm install --save styled-components

In the following example on a Linkedin-clone project that I am working on, I used the styled component to style the ‘Join Now’ and ‘Sign In’ components.

Login component for linkedin clone

I imported the styled-component package on top of my file, and wrote pure CSS in my Javascript file. This was new to me and I find it quite nice to use, as it is directly in our file so we can really see what we are styling. It could make files look really complicated if we get too much code and CSS to write to create a single component.

Method #3: CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS class names and animation names are scoped globally by default. This can lead to conflict, especially in large stylesheets; one style can override another. This is the problem CSS Modules solves. CSS classes are only available within the component where they are used.

In this example, I’m going to style the Sign In button in my Linkedin-clone app using the CSS Modules. First, I am going to create a Login.module.css file in my components folder. Then I will import this file in my Login component, using styles as a name. Note that I could use any name but this the standard.

Finally, I will create a button tag and pass this style attribute to it, after adding some simple CSS to see the result.

I worked on creating a few clones lately, and my preferred method was using the BEM convention. I found it really easy to use and organize my files by creating a related css file to each component.

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.