Lesson 8 - Styling In React

8.4 - JavaScript Object

CSS style properties can also be declared as a JavaScript Object. This lets you apply CSS directly within your component. Like the inline CSS, you must the camelCase for the styling properties.

Unlike inline CSS which becomes hard to maintain when there are multiple style properties, this method allows you to apply component-specific style with several style properties inside the component.

Have a look at the following example,

import React  from 'react';

function App() {
 const myStyle = {
 color: "white",
 backgroundColor: "DodgerBlue",
 padding: "10px",
 };

 return (
 <>
 <h1 style={myStyle}>This is a Heading</h1>
 </>
 );
}

Here, we create a JavaScript object myStyle, containing all the styling properties. Then we directly applied it you our component.