React CSS To style an application, CSS is used. For styling in React app, The style attribute is mostly used. It adds dynamically-computed styles at render time. There are mainly four ways to style React components.

Inline Styling: A JavaScript object in camelCase version of the style name is used to specify Inline Styling.

Example: App.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
class App extends React.Component {  
render() {  
return (  
  
Hello World
  
Have a Colorful Day.
  
  
);  
}  
}  
export default App;  

Output: import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { return (

); } } export default App;

Output: import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { render() { const styletext = { color: "Blue", backgroundColor: "lightBlue", padding: "5px", font-family: "Arial" }; return (

); } } export default App;

Output: import React from 'react'; import ReactDOM from 'react-dom'; import './App.css'; class App extends React.Component { render() { return (

); } } export default App;

App.css:

body {  
color: blue; 
font-family: Arial; 
text-align:centre;
}  

Index.html:

Output: import React from 'react'; import ReactDOM from 'react-dom'; import styles from './myStyles.module.css'; class App extends React.Component { render() { return (

); } } export default App;

myStyles.module.css:

.mystyle {  
  background-color: lightblue;  
  color: Blue;  
  padding: 10px;  
  font-family: Arial;  
  text-align: center;  
}  
.parastyle{  
  background-color: pink;    
  color: Crimson;  
  font-family: Arial;  
  font-size: 5px;  
  text-align: center;  
}  

Output: $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: 10px;  
border: 2px solid blue;  
&:hover {  
background-color: ${(props:any) => props.hoverColor};  
} `; 
const Title = styled.h1`  
font-family: Arial;  
text-align: center;  
color: Red;  `
;  
const Paragraph = styled.p`  
font-size:40px;
text-align: center;  
color: Brown;
`;  
return (  
            
  
   
  
Hello World  
  
  
);  
}  
}  
export default App;  

Output: