/    /  ReactJS- React CSS

React CSS

CSS in React is provided to style the React web App or UI Component. The react style attribute is the use attribute for react styling in React web applications, which adds dynamically-computed styles at render time. It provides a JavaScript object in camelCased properties rather than a CSS string. There are different ways available to add styling to your React web App or Component with Cascading Style Sheets (CSS). Here, we are going to discuss mainly four ways to style React UI Components, which are given below:

⦁ Inline Styling
⦁ CSS Stylesheet
⦁ CSS Module
⦁ Styled Components

 

line Styling:

The inline styles are specified with a JavaScript object in the camelCase version of the style name. Its value is the style’s value, which we usually take in a string.

EXAMPLE:

App.js

import React from 'react';
import ReactDOM from 'react-dom';

const Header = () => {
 return (
  <>
   <h1 style={{color: "red"}}>Hello Style!</h1>
   <p>Add a little style!</p>
  </>
 );
}

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

OUTPUT:

reactcss

 

camelCase Property:

Example:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends React.Component { 
 render() { 
  return ( 
   <div> 
   <h1 style={{color: "Red"}}>Hello i2tutorials!</h1> 
   <p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p> 
   </div> 
  ); 
 } 
} 
export default App;

 

Using JavaScript:

Example:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends React.Component { 
 render() { 
  const mystyle = { 
   color: "Green", 
   backgroundColor: "lightBlue", 
   padding: "10px", 
   fontFamily: "Arial" 
  }; 
  return ( 
   <div> 
   <h1 style={mystyle}>Hello JavaTpoint</h1> 
   <p>Here, you can find all CS tutorials.</p> 
   </div> 
  ); 
 } 
} 
export default App;

 

CSS Stylesheet:

You can write styling in a separate file for your React web application, and save the file with a .css extension. Now, you can import this file into your web application.

EXAMPLE:

App.js:

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

class App extends React.Component { 
 render() { 
  return ( 
   <div> 
   <h1>Hello i2tutorials</h1> 
   <p>Here, you can find all CS tutorials.</p> 
   </div> 
  ); 
 } 
} 
export default App;

App.css:

body { 
 background-color: #008080; 
 color: yellow; 
 padding: 40px; 
 font-family: Arial; 
 text-align: center; 
}

 

Index.html:

DOCTYPE html> 
<html lang="en"> 
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" 
   content="width=device-width, initial-scale=1" /> 
  <title>React App</title> 
 </head> 
 <body> 
  <div id="app"></div> 
 </body> 
</html>

 

CSS Module:

CSS Module is another way of adding styles to your web application. It is a CSS file in react app where overall class names and animation names are scoped locally by default. It is available only for the react component that imports it, which means any styling you add can never be applied to other components without your permission, and you never need to worry about name conflicts. You can create a CSS Module with the .module.CSS extension like a myStyles.module.css name.

EXAMPLE:

App.js

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

class App extends React.Component { 
 render() { 
  return ( 
   <div> 
   <h1 className={styles.mystyle}>Hello i2tutorials</h1> 
   <p className={styles.parastyle}>It provides great CS tutorials.</p> 
   </div> 
  ); 
 } 
} 
export default App;

 

Styles.module.css

.mystyle { 
 background-color: #cdc0b0; 
 color: Red; 
 padding: 10px; 
 font-family: Arial; 
 text-align: center; 
} 

.parastyle{ 
 color: Green; 
 font-family: Arial; 
 font-size: 35px; 
 text-align: center; 
}

 

Styled Components:

The styled-components provides:

⦁ Automatic critical CSS
⦁ No class name bugs
⦁ Easier deletion of CSS
⦁ Simple dynamic styling
⦁ Painless maintenance

INSTALLATION:

$ npm install styled-components --save

Example:

App.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import styled from 'styled-components'; 

class App extends React.Component { 
 render() { 
  const Div:any = styled.div` 
       margin: 20px; 
       border: 5px dashed green; 
       &:hover { 
       background-color: ${(props:any) => props.hoverColor}; 
       } 
       `; 
  const Title = styled.h1` 
       font-family: Arial; 
       font-size: 35px; 
       text-align: center; 
       color: palevioletred; 
       `; 
  const Paragraph = styled.p` 
       font-size: 25px; 
       text-align: center; 
       background-Color: lightgreen; 
       `; 
  return ( 
    <div> 
       <Title>Styled Components Example</Title> 
       <p></p> 
       <Div hoverColor="Orange"> 
         <Paragraph>Hello i2tutorials!!</Paragraph> 
       </Div> 
    </div> 
  ); 
 } 
} 
export default App;