DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Saleh Mubashar
Saleh Mubashar

Posted on • Updated on

Different Ways to add CSS in React JS

Hi guys!.

In this post, we will be looking into the best ways CSS code can be added in React JS or to you React App.
Obviously, CSS is crucial in making your app user friendly and visually attractive. These are the different ways to add CSS to your react app:

Please check out my new tutorial.


1 - External Stylesheet

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

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

2 - Inline CSS

Probably the most common and quickest out of all 3 is inline CSS. However it has many disadvantages and it is generally discouraged to use unless it is a very small application.
Basically, we create an object that contains different references which are then called using the style{} attribute.
For example, the CSS is added like this:

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 in you component. Then you can create a new variable that will contain the CSS. The same variable name with open and close brackets will render or create 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
render(
  <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.

Until next time.
Cheers!

Top comments (4)

Collapse
 
lukeshiru profile image
Luke Shiru • Edited on

Adding a few missing:

4 - CSS Modules

You can have 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 then you 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

By far one of the best ways of using CSS in React.

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. If you pair it with their VSCode extension is a great dev experience:

<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).


One thing to keep in mind is that you always have "other ways" of doing stuff (and sometimes those are way better than the ones you know), so we should try to avoid sentences such as "the 3 best ways", and maybe be more like "3 ways" or "3 best ways I know".

Cheers!

Collapse
 
salehmubashar profile image
Saleh Mubashar Author

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 Author

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 Author

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 :)

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs