CSS Styling in React
React JS supports two types of CSS styles.
1. Inline Styles
2. External Styles
1. Inline Styles
Inline styles will be declared with style attribute.
Syntax: style={{<CSS Styles>}}
Example-1: style={{color:'red'}}
Example-2: style={{backgroundColor:'black'}}
In react js background-color is working as backgroundColor, We have to use camel case for this type of properties when we use inline styles.
Display.js
import React, { Component } from "react";
export default class Display extends Component{
render(){
return(
<div style={{margin:'10px'}}>
<h2 style={{color:'red',backgroundColor:'black',padding:'10px'}}>{this.props.name}</h2>
</div>
)
}
}
Output:
2. External Styles
External style sheets can be created in React, We can import those style sheets in component.
className attribute is used call the class in React.
Display.js
import React, { Component } from "react";
import './Display.css';
export default class Display extends Component{
render(){
return(
<div className="div1">
<h2 className="h21">
{this.props.name}</h2>
</div>
)
}
}
Display.css
.div1{
margin: 10px;
}
.h21{
padding: 10px;
color: orange;
background-color: black;
}
Output:
