CSS Styling with JavaScript Object in React

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

import React, { Component } from "react";

class CSSJavaScriptObject extends Component {

render() {

const mystyle = {

color: "white",

backgroundColor: "DodgerBlue",

padding: "10px",

fontFamily: "Arial"

};

return (

<div>

CSS with JavaScript Object

<h1 style={mystyle}>Style!</h1>

</div>

);

}

}

export default CSSJavaScriptObject;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSJavaScriptObject from "./component/CSSJavaScriptObject";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSJavaScriptObject />

</div>

);

}

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

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

Output: