- 3 years ago
- Zaid Bin Khalid
- 13895 Views
-
3
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 file code is given below.
//App.css
body {
background-color: #008080;
color: yellow;
padding: 40px;
font-family: Arial;
text-align: center;
}
The index.html file code is given below.
<!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:
Here, we create a variable by selecting a particular HTML element such as, and <paragraph> where we store our style attributes. Now we can use the name of our variable as a wrapper <Div></Div> kind of React component.</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
- 3 years ago
- Zaid Bin Khalid
- 13895 Views
-
3