Style React Using JavaScript Object

We can also style React using JavaScript objects. We need to create an object with styling information and refer to it in the style attribute in an element.

Syntax

const MyComponent = () => {
   const myStyle = {
      // CSS goes here...
   }

  return (
    <div style={myStyle}>
         // JSX goes here ...
    </div>
  );
}

Example

const MyComponent = () => {
   const myStyle = {
      background-color: red;
      height: 100px;
      width: 300px;
   }

  return (
    <div style={myStyle}>
         This is my element.
    </div>
  );
}