Skip to content

Spoke Right

Education for everyone

https://spokeright.com
Primary Menu
  • Home
  • Our Services
    • Translation
    • Interpretation
    • Transcription
    • Voice-Over
    • Proofreading
    • Content writing
  • Free Education
    • Learn Android Studio
    • Learn Python
    • Learn MongoDB
    • Learn MySql
    • Learn React
    • Montessori Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
    • TicTac
    • Checkers
    • Foosball
    • Billiards
    • Master Chess
    • Logic Game
  • Contact Us
Download Now
  • Home
  • Learn React
  • How do I use CSS in React
  • Learn React

How do I use CSS in React

Spoke Right December 15, 2022 2 min read

CSS In ReactJS

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 componen

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 (  
<div>  
<h1 style={{color: "Blue"}}>Hello World</h1>  
<p>Have a Colorful Day.</p>  
</div>  
);  
}  
}  
export default App;

camelCase Property Name:
A property name must be written in camel case syntax when the properties have two names.

Example:
App.js:

import React from 'react';  
import ReactDOM from 'react-dom';  
class App extends React.Component {  
render() {  return (  
<div>  
<h1 style={{color: "Blue"}}>Hello World</h1>  
<p style={{backgroundColor: "yellow"}}>Have a Colorful Day.</p> 
</div>  
);  
}  
}  
export default App;

Using JavaScript Object:
Example:
App.js:

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 (  
<div>  
<h1 style={styletext}>Hello World</h1>  
<p>Have a Colorful Day.</p>   
</div>  
);  
}  
}  
export default App;

Output:

CSS Stylesheet:
CSS Stylesheet allows to write styling in a separate file and to save the file with a .css extension, which can be later imported in an 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 World</h1>  
<p>Have a Colorful Day.</p>  
</div>  
);  
}  
}  
export default App;

App.css:

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

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>

CSS Module:
All class names and animation names in CSS Module are scoped locally by default, thus the CSS file is available only for the component which imports it. It can never be applied to other components without permission.

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 World</h1>  
<p className={styles.parastyle}>Have a Colorful Day.</p>  
</div>  
);  
}  
}  
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:

Styled Components:
Being a library for React, it enhances CSS for styling React component systems in an application. This component facilitates; Automatic critical CSS; No class name bugs; Easier deletion of CSS; Simple dynamic styling; and Painless maintenance.

Installation:
Command:

$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 (  
<div>            
<Title>Example</Title>  
<p></p>  
<Div hoverColor="Crimson">  
<Paragraph>Hello World</Paragraph>  
</Div>  
</div>  
);  
}  
}  
export default App;

Continue Reading

Previous: What is map in ReactJS
Next: What is Bootstrap in ReactJS

Related Stories

Which is Difference Between AngularJS And ReactJS
1 min read
  • Learn React

Which is Difference Between AngularJS And ReactJS

December 16, 2022
What is higher-order component in Reactjs
2 min read
  • Learn React

What is higher-order component in Reactjs

December 16, 2022
How do I create a table in ReactJS
2 min read
  • Learn React

How do I create a table in ReactJS

December 16, 2022

This AD Will support Us

Support Us

Coding Ustad LTD Support
Coding Ustad LTD Support

Coding Ustad LTD

Coding Ustad LTD
Coding Ustad LTD

Recent Posts

  • How to Install Node.js and npm on CentOS 7
  • How to Install Node.js and npm on CentOS 7
  • How to Install CentOS Web Panel (CWP) on CentOS 7
  • The Power of Marketing in Real Estate: A Guide to Boost Your Business
  • Vehicle Verification in Pakistan

Get free Hosting

Hostens.com - A home for your website

You may have missed

How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 3, 2023
How to Install Node.js and npm on CentOS 7
4 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install Node.js and npm on CentOS 7

May 2, 2023
How to Install CentOS Web Panel (CWP) on CentOS 7
3 min read
  • Coding Ustad LTD
  • Education for Everyone

How to Install CentOS Web Panel (CWP) on CentOS 7

May 2, 2023
The Power of Marketing in Real Estate: A Guide to Boost Your Business https://thaikadar.com/secureinvestment/
2 min read
  • Article By Spoke Right
  • Blog By Spoke Right
  • Circular Byte Private Limited

The Power of Marketing in Real Estate: A Guide to Boost Your Business

January 30, 2023
  • Home
  • Our Services
  • Free Education
  • Spoke Right News
  • Earn Online
  • Classic Games by Spoke Right
  • Contact Us
Copyright © All rights reserved. | MoreNews by AF themes.