ReactJs Tutorials
How to use CSS in React Application?
The style attribute is the most used attribute for styling in React applications, which adds dynamically-computed styles at render time. It accepts a JavaScript object in camelCased properties rather than a CSS string.
Inline Styling
CSS Stylesheet
CSS Module
Styled Components
Inline Styling
Inline Styling is one of the safest ways to style the React component. It declares all the styles as JavaScript objects using DOM based css properties and set it to the component through style attributes.
File name : App.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Red"}}>Hello Sana!</h1>
<p>How are You</p>
</div>
);
}
}
export default App;
Note :-
Note: You can see in the above example, we have used two curly braces in:
<h1 style={{color: "Red"}}>Hello ItTutorial!</h1>.
It is because, in JSX, JavaScript expressions are written inside curly braces, and JavaScript objects also use curly braces, so the above styling is written inside two sets of curly braces {{}}.
camelCase Property Name
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<div>
<h1 style={{color: "Red"}}>Hello ItTutorial!</h1>
<p style={{backgroundColor: "lightgreen"}}>Here, you can find all CS tutorials.</p>
</div>
);
}
}
export default App;
Using JavaScript Object
File name : App.js
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 application, and save the file with a .css extension. Now, you can import this file in your application.
File name : 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;
File name : App.css
body {
background-color: #008080;
color: yellow;
padding: 40px;
font-family: Arial;
text-align: center;
}
CSS Module
CSS Module is another way of adding styles to your application. It is a CSS file where all class names and animation names are scoped locally by default. It is available only for the component which imports it, 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 CSS Module with the .module.css extension like a myStyles.module.css name.
File name : 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;
myStyles.module.css
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
Styled-components is a library for React. It uses enhance CSS for styling React component systems in your application, which is written with a mixture of JavaScript and CSS.
The styled-components provides:
Automatic critical CSS
No class name bugs
Easier deletion of CSS
Simple dynamic styling
Painless maintenance
File name : 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;
File name : App.js
File name : App.js