Articles → REACT.JS → Working with styles in React.js

Working with styles in React.js






Using the bootstrap classes




npm install react-bootstrap@next bootstrap@5.0.2




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




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'));




Picture showing the button after bootstrap classes are applied on it

Click to Enlarge




Using style object




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'));




Picture showing applying the style using style object

Click to Enlarge


Using the inline styles




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'));




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/FeedbackCharacters remaining 250