DEV Community

Cover image for Different Ways to add CSS in React JS
Saleh Mubashar
Saleh Mubashar

Posted on • Updated on • Originally published at salehmubashar.com

Different Ways to add CSS in React JS

Hi guys!.

In this post, we will be looking at the best ways to add CSS code to your React app.
Undoubtedly, CSS plays a crucial role in making your app user-friendly and visually appealing. There are various ways to add CSS to your React app. Let's discuss some of them.

Read this article on my blog.


1 - External Stylesheet

You can create a new CSS file in your project directory and add your CSS inside it. It can then be imported into your React component or class.
The following code is used to import an external CSS stylesheet.

import "./styles.css";
Enter fullscreen mode Exit fullscreen mode

2 - Inline CSS

Inline CSS is perhaps the most common and quick method to add styles in React. However, it has several drawbacks and is generally discouraged, especially for larger applications.

To implement inline CSS, you can create an object containing style references, which can be then called using the style{} attribute.
For example:

const styles = {
  section: {
    fontSize: "18px",
    color: "#292b2c",
    backgroundColor: "#fff",
    padding: "0 20px"
  },
  wrapper: {
    textAlign: "center",
    margin: "0 auto",
    marginTop: "50px"
  }
}
Enter fullscreen mode Exit fullscreen mode

It is then added to an element like this:

<section style={styles.section}>
  <div style={styles.wrapper}>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

3 - Styled Components

Probably the most powerful and useful in my opinion is Styled Components. Styled Components lets you write actual CSS in your JavaScript. The main advantage is that you can add conditional code and use variables and functions within the CSS.

You can install Styled Components using the following command:

npm install --save styled-components

Next, you need to import it into your component. Then you can create a new variable that will contain the CSS. The same variable name can be used to an HTML element with the previously added styles on it.

import styled from 'styled-components'
// Create a button variable and add CSS
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid red;
  color:red;
`
//display the HTML
return (
  <div>
    <Button>Button</Button>
  </div>
);
Enter fullscreen mode Exit fullscreen mode
Other than these, there are 3 more useful ways you can add CSS (credit to lukeshiru):

4 - CSS Modules

You can also add scoped styles quite easily, you just need to create a file with the extension .module.css, like this:

// ComponentName.module.css

.Red {
  color: #f00;
}

.Blue {
  color: #00f;
}
Enter fullscreen mode Exit fullscreen mode

Then you import it like this:

import styles from "./ComponentName.module.css";
Enter fullscreen mode Exit fullscreen mode

and use it like this:

<span className={styles.Red}>This text will be red</span>
<span className={styles.Blue}>This text will be blue</span>
Enter fullscreen mode Exit fullscreen mode

5 - Atomic CSS

One of the most popular atomic CSS frameworks out there is Tailwind, by just making it part of your project following their instructions you can just use classNames without even touching CSS.

<button className="font-bold bg-blue-600 px-6 py-3 text-white rounded-md">Blue button</button>
Enter fullscreen mode Exit fullscreen mode

6 - Emotion

Styled-components is not the only library that allows you to create components with styles embeded on them, you have great alternatives out there such as Emotion. The best thing about Emotion is that it's framework agnostic, so you can take your knowledge to other libraries and frameworks besides React, while being pretty similar to styled-components (so you can in several scenarios just change the import).


And there you have it. I am sure there are many more out there but I think these options tick most of the boxes needed when adding CSS to your app.

Kindly check out my blog too!

Thanks!

Oldest comments (3)

Collapse
 
salehmubashar profile image
Saleh Mubashar

wow!.
thanks for the addition
i know most of these, but I mentioned only the 3 best in my opinion or which I use
Will add these too.
thanks a lot
:)

Collapse
 
salehmubashar profile image
Saleh Mubashar

yes you have a good point, I should not have written the '3 best ways' .
Still learning :)
once again thanks

Collapse
 
salehmubashar profile image
Saleh Mubashar

Guys, do check out my hubpages profile and tutorials too.
Many more will be uploaded there as well (not same ones as here)
Would really appreciate the support there.
Thanks :)