Articles → REACT.JS → Working With Styles In React.Js

Working With Styles In React.Js

In this article, we will be working with styles in React.js.

Using The Bootstrap Classes

To use the bootstrap classes, you must install bootstrap first. For that, use the following command in the node.js command prompt.

npm install react-bootstrap@next bootstrap@5.0.2

Once the bootstrap is installed, import the same using the following code.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Finally, use it inside the render method. Here is the complete code.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';


class Message extends Component {

    render() {
        return (
            <button className="btn btn-primary">Click Me</button>
            );
    }

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

Once you run the above project, you will get the following output

Picture showing the button after bootstrap classes are applied on it

Click to Enlarge

As shown in the code above, you use the className attribute for setting the class on an element.

Using Style Object

You can use the style object to set up the style. Here is the sample code.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';


class Message extends Component {

    styles =
        {
            fontSize: 30,
            fontWeight: "bold"
        };
    render() {
        return (
            <span style={ this.styles}>This is the text</span>
        );
    }

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

When you execute the above code, you will get the following output.

Picture showing applying the style using style object

Click to Enlarge

Using The Inline Styles

You can use the inline styles, see the following code

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';


class Message extends Component {

    styles =
        {
            fontSize: 30,
            fontWeight: "bold"
        };
    render() {
        return (
            <span style={{fontWeight:"bold", fontSize:100}}>This is the text</span>
        );
    }

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

Here is the output

Picture showing applying the style using inline style

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Wednesday, August 4, 2021

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250