React js Styling Using CSS

Hello Friends,

Today, react inline styling example is our main topic. We will look at example of react js camel cased css example. This post will give you simple example of react JavaScript Object css. This article goes in detailed on react js stylesheet.create.

Inline Styling

This style same as normal but in react you have to write css in react object like "{{}}". To style an element with the inline style attribute.

/src/Mycss.js file

import React from 'react'

class Mycss extends React.Component{

    render(){
        return(
            <div>
                <p style={{ color:"red",padding:"15px" }}>Apply Inline CSS</p>
            </div>
        )  
    }
}

export default Mycss;

camelCased Property Names

In React js "-" this will not allowed. some properties have two names like "font-size" this must be written with camel case syntax.

import React from 'react'

class Mycss extends React.Component{

    render(){
        return(
            <div>
                <p style={{ fontSize:"20px",backgroundColor:"red" }}>Apply Inline camelCased CSS</p>
            </div>
        )  
    }
}

export default Mycss;

JavaScript Object

You can also create javascript object then it will givin to style attribute. you can write javascript object in render method. this object write in style attribute like "{objectName}".

also you have to write two name properties in camelCased.

/src/Mycss.js file

import React from 'react'

class Mycss extends React.Component{

    render(){

        const myCustomClass = {
            color: "white",
            backgroundColor: "DodgerBlue",
            padding: "10px",
            fontSize:"30px"
        };

        return(
            <div>
                <p style={myCustomClass}>Apply JavaScript Object CSS</p>
            </div>
        )  
    }
}

export default Mycss;

CSS Stylesheet(external css)

Generally we are call external css. in this style you have to create ".css" extension file. then you have to import this file where you have to used.

We must use "className" attribute to give class in any tag.

/src/App.css file

.my-custom-class {
  background-color: #282c34;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  color: white;
}

/src/App.js file

import React from 'react'
import './App.css';

class Mycss extends React.Component{

    render(){

        return(
            <div>
                <p className="my-custom-class">Apply JavaScript Object CSS</p>
            </div>
        )  
    }
}

export default Mycss;

CSS Modules

This is one of different css style of react. but this is not use in regular development. Another way of adding styles to your application is to use CSS Modules. Create the CSS module with the .module.css extension, example: mystyle.module.css.

/src/mystyle.module.css file

.myCusClass {
    color: DodgerBlue;
    padding: 40px;
    font-family: Arial;
    text-align: center;
  }

/src/App.js file

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

class App extends React.Component {
  render() {
    return <p className={modulestyles.myCusClass}>Apply Modules CSS</p>;
  }
}

export default App;

I hope it can help you...