Friday, June 19, 2020

ReactJS inline CSS

ReactJS CSS


Inline stylesheet ReactJS


The inline stylesheet(CSS) is one of the ways to apply styles to any HTML page. In React JSX, JavaScript expressions are placed within curly brackets. Since, the inline style rules are also written within the curly brackets, so we need to write inline style rules inside two sets of curly brackets {{}}.

for example,

class SimpleHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Inline Style</h1>
      <p>Welcome to ReactJS</p>
      </div>
    );
  }

ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root'));

camelCased Property Names 

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written in camel-cased syntax,

class SimpleHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red", backgroundColor:'lightgreen'}}>Inline Style</h1>
      <p>Welcome to ReactJS</p>
      </div>
    );
  }
}
ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root') );

Style rules withing JavaScript Object


We can create a JavaScript object containing style information and use it as attribute in JSX. For example,

class SimpleHeader extends React.Component {
  render() {
    const hstyle= {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={hstyle}>Style Example</h1>
      <p>Welcome to ReactJS</p>
      </div>
    );
  }
}
ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root') );

The result will appear as,


reactjs inline style



The above can also be written as,

function SimpleHeader()  
{
    const hstyle= {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={hstyle}>Style Example</h1>
      <p>Welcome to ReactJS</p>
      </div>);
    
}
ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root'));


External CSS


The style rules can be written inside an external .css file and it can be imported later for the use. For example, we can create App.css having the following content,

#sh {
  background-color: #282c34;
  color: orange;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}
It can now be imported to the application as,

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

function SimpleHeader()  
{
    return (
      <div id='sh'>
      <h1>Style Example</h1>
      <p>Welcome to ReactJS</p>
      </div>);
    
}
ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root') );

The results will appear as,



reactjs external stylesheet


CSS Modules


Another very simple and convenient way to add styles to the React components is the CSS modules. These modules are placed in separate files. 

The CSS placed inside a module is available only for the component that imported it, and we need not take care of the about naming conflicts.  We can create a CSS module with the .module.css extension (e.g. sh.module.css), and place the following code within this file.

.sh {
  background-color: #282c34;
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

Now, we can import the style in our code as,

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './sh.module.css'; 

function SimpleHeader()  
{
    return (
      <div className={styles.sh}>
      <h1>Style Example</h1>
      <p>Welcome to ReactJS</p>
      </div>);
    
}
ReactDOM.render(<div><SimpleHeader/></div>,document.getElementById('root') );