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