Style React Using Inline CSS

We can style React using Inline CSS. To style a React element with the inline style attribute, the value must be a JavaScript object, and the CSS properties with hyphen separators, like background-color, must be written with camel case like backgroundColor syntax. The CSS is written within the element tag inside the style attribute.

Syntax

<div style={{ 
// css goes here
 }}>

Example

import React from 'react';

const MyComponent = () => {
  return (
    <div style={{ backgroundColor: "red", height: "100px", width: "300px" }}>
         This is my element.
    </div>
  );
}

export default MyComponent;