How to set inline style of backgroundcolor in Reactjs?

In React, you can apply inline styles to components by passing a style object to the style attribute of an element. For background color, use the backgroundColor property, which follows the camelCase naming convention in JSX. This differs from CSS property names used in HTML, which are separated by hyphens.

Here are examples of how to set background color inline styles for React components:

jsx
import React from 'react';

function App() {
  const style = {
    backgroundColor: 'lightblue' // This can be any valid CSS color value
  };

  return (
    <div style={style}>
      This div's background color is set to lightblue.
    </div>
  );
}

export default App;

You can directly embed styles into the style attribute without creating a separate style object:

jsx
import React from 'react';

function App() {
  return (
    <div style={{ backgroundColor: 'lightblue' }}>
      This div's background color is set to lightblue.
    </div>
  );
}

export default App;

Both methods are valid. The first method is suitable when setting multiple style properties, while the second method is better for simple style changes.