We can use CSS in React like HTML CSS that is inline CSS or external CSS.
in React inline CSS we use similar to javascript object notation. it mean React inline CSS are written in Curly braces.
Example
{{color:red,backgroundColor:blue}}
React inline CSS uses javascript object notation so in inline React CSS camelSyntax we use instead of regular syntax of CSS like background-color
Example of inline CSS in React Component
class Inlinecss extends React.Component {
render() {
return (
<div>
<h1 style={{backgroundColor: "lightblue"}}>inline style</h1>
<p>inline css</p>
</div>
);
}
}
Javascript object notation for React CSS in Component
class Css extends React.Component {
render() {
const style = {
color: "white",
backgroundColor: "blue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={style}>inline style</h1>
<p>inline style with javascript object</p>
</div>
);
}
}
\
React CSS Stylesheet
jus create a .css extension file like Css.css and add the below style
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Arial;
text-align: center;
}
Now import .css file in React Component
import React from 'react';
import ReactDOM from 'react-dom';
import './Css.css';
class Css extends React.Component {
render() {
return (
<div>
<h1>hello external css</h1>
</div>
);
}}
ReactDOM.render(<Css />, document.getElementById('root'));
React Css in Module ?
Css in React can also be used through module
just use .module.css like module file name is mystyle.module.css
and add the given below CSS
.blue {
color: blue;
padding: 40px;
font-family: Arial;
text-align: center;
}
And now import mystyle.module.css in React Component
App.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './mystyle.module.css';
class Modulecss extends React.Component {
render() {
return <h1 className={styles.blue}>hello module css</h1>;
}
}
export default Modulecss ;
now import the React Component in Application
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Modulecss from './App.js';
ReactDOM.render(<Modulecss />, document.getElementById('root'));