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
Localhost:3000

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.

Conclusion

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Native <View> vs <Text> — Simplified

How to Frontend at Kata.ai

Simple Components: React vs AngularJS vs Ember

Hook Your Web Contact Form to Telegram

Part 1 : How to update state in React.js

Server Vs. Serverless

Next.js development with instant dev-database provisioning

Use Stylify to Dynamically Generate CSS Based on What You Write

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
5beberson

5beberson

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.

More from Medium

How can we start a new line by using react way?

How to Build a Simple Carousel in React

Basics of React.js

how to add css pseudo to your react inline styles using radium