In this session, we will learn how to use CSS to React JS with examples and Codes.
React CSS
To style the React App or component CSS in React is used. The most used attribute for styling in React application is called style attribute.
Inline Styling. CSS Stylesheet. CSS Module. Styled Components. Inline Styling
The inline styles are specified with a JavaScript object with the help of the camelcase version of the style name. Style’s value is its value, which we usually take in a string.
//Example
//App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Green"}}>Hello JavaTpoint!</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
Output CSS Stylesheet
You can write styling in a separate file for your React application, and save the file with a .css extension. Now, you can import this file in your 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 JavaTpoint</h1>
<p>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
The App.css
//App.css
body {
background-color: #008080;
color: yellow;
padding: 40px;
font-family: Arial;
text-align: center;
}
The 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>
Output
CSS Module
An other way of adding styles to your application is CSS Module.
//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 JavaTpoint</h1>
<p className={styles.parastyle}>It provides great CS tutorials.</p>
</div>
);
}
}
export default App;
The CSS file code is given below.
//myStyles.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;
}
Output :
Styled Components
For React Styled-components work as a library .
The styled-components provides:
Automatic critical CSS No class name bugs Easier deletion of CSS Simple dynamic styling Painless maintenance Installation To install in your React application, the styled-components library takes a single command. which is mention below:
$ npm install styled-components --save
Example :HTML <paragraph> <Div></Div> </p>
//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 JavaTpoint!!</Paragraph>
</Div>
</div>
);
}
}
export default App;
Output
