In React, inline styling can be done using two main approaches: using a style object or a function that returns the style object. Let’s explore both.

1. Inline Style as an Object

In this approach, you define the styles as a JavaScript object where the keys are the CSS properties in camelCase (rather than hyphenated) and the values are the corresponding CSS values.

Example:

function App() {
  const divStyle = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  };

  return (
    <div style={divStyle}>
      Hello, this is styled with an object!
    </div>
  );
}

export default App;

Explanation:

• The divStyle object contains CSS properties written in camelCase (e.g., backgroundColor instead of background-color).
• The object is passed to the style attribute, which automatically applies the styles to the element.

2. Inline Style as a Function

You can also use a function to return the style object dynamically based on props, state, or any condition. This can be useful for conditional styling.

Example:

function App({ isActive }) {
  const getStyle = () => ({
    color: isActive ? 'green' : 'red',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  });

  return (
    <div style={getStyle()}>
      The text color is {isActive ? 'green' : 'red'}.
    </div>
  );
}

export default App;

Explanation:

• getStyle is a function that returns a style object.
• The styles change based on the isActive prop: if isActive is true, the color is green; otherwise, it is red.
• Using a function allows for dynamic styling based on variables or state.

---

Key Differences:

• Style as an Object: Simple and static. Great for constant styling.
• Style as a Function: More flexible and dynamic. Useful for conditional or state-based styles.

When to Use Each:

• Use style as an object when the styles are static and don’t depend on any variables.
• Use style as a function when you need to change styles based on props, state, or events.