How do I use inline CSS in React?

How do I use inline CSS in React?

You can use inline CSS in React by passing a style object to the style prop of a component. For example:

const myStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
};

function MyComponent() {
  return <div style={myStyle}>Hello, World!</div>;
}

Can I use JavaScript expressions in the style object?

Yes, you can use JavaScript expressions in the style object. For example:

const isActive = true;
const myStyle = {
  color: isActive ? 'green' : 'red',
};

What about using multiple styles?

You can combine multiple styles by using the spread operator. For example:

const additionalStyles = {
  fontSize: '20px',
};

const myStyle = {
  color: 'blue',
  ...additionalStyles,
};

Are there any performance concerns with inline styles?

Inline styles can lead to performance issues if overused, as they create new style objects on each render. It's often better to use CSS classes for complex styles.