How to apply CSS in ReactJS application

To build a User Interface, we need the structure of HTML elements, some stylings of CSS, and the logic of JavaScript. With this three, we can make a User Interface more creative and interactive. When we are talking about styling the Components, we basically are looking for CSS (Cascading Style Sheets) to do that. Though there is nothing specific in ReactJS when it comes to CSS code.

Ways to add some styling on React Components.

Inline CSS as an Object
Import external CSS file

Inline CSS as an Object in reactJS

In HTML, we can simply add inline style with the style="" attribute. For example, we can take a look at the below code,

<!DOCTYPE html>
<html>
<body>
// this inline style will add color and alignment to the h1 tag
<h1 style="color:blue;text-align:center;">Add inline style to heading</h1>
// this will change the color of the paragraph text to red
<p style="color:red;">Add style to paragraph paragraph.</p>

</body>
</html>

And the output will be something like this,

But in ReactJS, we have to keep in mind that we are not exactly working with HTML. We will be adding styles to JSX elements; that looks like the normal HTML elements but are not. So, there are slight differences in attribute names and the way we add values to those attributes.

// src/App.js

import React from 'react';

const App = () => {
  return (
    <div>
      {/* this will change the color and align the text to center */}
      <h1 style={{ color: 'blue', textAlign: "center" }}>Add inline style to heading</h1>
      {/* this will change the color of the paragraph text to red */}
      <p style={{ color: 'red' }}>Add style to paragraph paragraph.</p>
    </div>
  );
};

export default App;

In JSX we add JavaScript codes inside curly braces. To add inline styling on any element, we have to add those styles as key-value pairs or we can say, as object properties inside curly braces. If we take a look at the above code snippet, we can see that we are applying some styles to the <h1> tag and <p> tag. But we are adding those styles as object properties. And the output will be the same as before. There won’t be any changes.

As you already know, we add inline style as object properties to JSX; One thing we could do is declare an object that will contain the style properties and insert this object to the JSX.

// src/App.js

import React from 'react';

const App = () => {
  // declaring object for h1 
  const styleHeading = {
    color: "blue",
    textALign: "center"
  }
  // declaring object for p
  const styleParagraph = {
    color: "red",
  }
  return (
    <div>
      {/* this will also change the color and align the text to center */}
      <h1 style={styleHeading}>Add inline style to heading</h1>
      {/* this will also change the color of the paragraph text to red */}
      <p style={styleParagraph}>Add style to paragraph paragraph.</p>
    </div>
  );
};

export default App;

As we can see, we declared two objects with the styling properties as key-value pairs. One for <h1> and the other one for <p>. This will give us the same output as above, where we were adding the object properties inside the HTML tag element (<h1>, <p>).

Use External CSS in ReactJS

We can add a new CSS code of the given Component and we add that CSS file next to the JavaScript Component file.

We can create a CSS file in the same folder that the Style.js component is in. And there we can just continue with our styling however we want just like we used to do in HTML.

Now, to connect this CSS file we need to tell React explicitly to add this CSS file to our Component so that the CSS styles can make effects. We just have to import this CSS file to our Component; it’s just this.

import React from 'react';
// importing style.css file from the same folder as Style.js, to this component
import './Style.css';

const Style = () => {
    return (
        <div>
            <h1>Add inline style to heading</h1>
            <p>Add style to paragraph paragraph.</p>
        </div>
    );
};

export default Style;

In HTML we add a class attribute to work with multiple HTML elements to do styling. But instead of adding class as an attribute, we will add className. Because these “things” are not our regular HTML codes. Under the hood, it’s still JavaScript code. Though it will work just as fine even if we add class instead className. But it is not recommended to do so.

//src/Components/Style.js

import React from 'react';
// importing style.css file, to this component
import './Style.css';

const Style = () => {
    return (
        <div>
            <h1 className="heading">Add inline style to heading</h1>
            <p className="paragraph">Add style to paragraph paragraph.</p>
        </div>
    );
};

export default Style;

In the Style.css file, we can just apply some styles with regular CSS codes.

// src/Components/Style.css


/* adding style to the heading class */
.heading {
    color: blue;
    text-align: center;
}
/* adding style to the paragraph class */
.paragraph {
    color: red;
}

After we save this, the browser will re-render. And the output will be the same as the previous approaches.

So, these are the approaches that we can make to add style to our ReactJS application.