CSS Inline Styling in React

• Create Components folder under src folder
• Add CSSInlineStyling.js file and add below Code

import React, { Component } from "react";

class CSSInlineStyling extends Component {

render() {

return (

<div>

CSS Inline Styling

<h1 style={{ color: "red", fontSize: "15px", textAlign: "center" }}>

Style!

</h1>

<h1 style={{ backgroundColor: "lightblue" }}>Style!</h1>

</div>

);

}

}

export default CSSInlineStyling;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSInlineStyling from "./component/CSSInlineStyling";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSInlineStyling />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: