Adding CSS in React JS Application (Inline CSS, Import, Modules)

Adding CSS in React JS Application (Inline CSS, Import, Modules)

by

Styling in React with CSS is not very different from the conventional ways of building applications and it’s very similar to the static HTML website, but yes it’s somewhat different so in this article you will see what are the different ways to add CSS in React. We will briefly discuss some of the very common methods used by developers to add style to their react components.

4 Common Ways to Import or Add CSS to React JS Application

  • Inline Styling
  • CSS JavaScript Object
  • Import CSS Stylesheets
  • CSS Modules

Inline Styling/Inline CSS in React JS

Adding Inline CSS is the most direct and straightforward way to style any application built using React JS. This method doesn’t ask you for a separate stylesheet or CSS File. The styling done over here has higher precedence as compared to that done using stylesheet. Which means that inline styling overrides the other style rules applied to that particular element.

Code

Whenever we try to import CSS Properties like background-color: #000000; font-family: Arial; in inline CSS for React JS these should be rewritten as the camelCased Properties like we have shown below.

Use backgroundColor instead of background-color

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"; backgroundColor: "lightblue"}}>This Element is Styled Using Inline Style or CSS.</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS JavaScript Object in React JS

It’s similar to how React allows us to write HTML as JavaScript with JSX. CSS Object in JavaScript allows writing CSS styles directly in the components’ JavaScript (.js /.tsx) files. These styles are scoped to individual component. In other words, we can add, change or remove CSS without any errors. Since the CSS as a JavaScript object is file scoped to the changes to that object doesn’t impact the styles of the other components.

CSS – JavaScript Objects comes handy whenever we have the requirement to use the same inline style in two or more HTML elements. Also, Making CSS JS Object can make your code more readable. These objects will look very similar to the Material CSS Code.

Code

import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {
  const myStyle = {
    color: "#ffffff",
    backgroundColor: "#000000",
    padding: "10px"
  };
  return (
    <>
      <h1 style={myStyle}>Element Styled with CSS Object in JavaScript!</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

Importing CSS Stylesheets/File in React JS

Like we do traditionally in HTML, we can also write the CSS styling in a separate file, and save the file with the .css file extension, and import the file in our application. Example code is given below:

Code

App.css
body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Index.js

Import the App.css file in your component as shown below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

class Header extends React.Component {
  render() {
    return (
      <div>
      <h1>This Element will be styled with the APP.css file!</h1>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));

CSS Modules (Good for Optimization)

Apart from adding CSS as inline CSS, CSS file Import or by Making a CSS object there is a way called CSS modules. In this CSS Modules we need to write the CSS like we do normally in App.css, but the file name and extension for CSS modules will be .module.css instead of just .css.

Having a CSS module is good because when we are importing and adding the xyz.module.css then the CSS of this file will be applied only to the component that imported it, and you will also not get the name conflicts.

Code

mystyle.module.css
.redClass {
  color: red;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Import the mystyle.module.css file in your component as shown below:

import React from 'react';
import ReactDOM from 'react-dom/client';
import styles from './mystyle.module.css'; 

class Bike extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>This element is styled with mystyle module css.</h1>;
  }
}

export default Bike;

Conclusion

Note that we didn’t include any component libraries in this blog. We focused primarily on the different ways to compose styles.

One can also consider libraries to styles their web application using the libraries like Material UI.

Hope this article guide gave you a good understanding of how to style your React apps along with which approach to choose for your next project.

Leave a Comment