SyntaxShelf

Style object

2 snippets in React

REReact

Inline Style Objects

RE · JSX
Syntax
<div style={{ property: value }} />
Example
function ProgressBar({ percent }) {
  return (
    <div
      style={{
        width: `${percent}%`,
        height: "8px",
        backgroundColor: percent > 70 ? "#4caf50" : "#ff9800",
        borderRadius: "4px",
        transition: "width 0.3s ease",
      }}
    />
  );
}

Note Style properties use camelCase (backgroundColor, not background-color). Values that need units must include them as strings ("8px"), except for unitless properties like opacity and zIndex which accept numbers.

Inline Styles

RE · Styling
Syntax
<div style={{ cssProperty: value }} />
Example
function AlertBanner({ type, message }) {
  const styles = {
    padding: '12px 16px',
    borderRadius: '6px',
    fontWeight: 'bold',
    backgroundColor: type === 'error' ? '#fde8e8' : '#e8f5e9',
    color: type === 'error' ? '#c62828' : '#2e7d32',
    border: `1px solid ${type === 'error' ? '#ef9a9a' : '#a5d6a7'}`,
  };

  return <div style={styles}>{message}</div>;
}

Note Inline styles use camelCase property names and string/number values. They cannot handle pseudo-classes (:hover), media queries, or keyframe animations. Best for truly dynamic values that change at runtime.

Frequently asked questions

How does React handle style object?
React covers this with 2 copy-ready snippets on this page. The "Inline Style Objects" snippet in React uses `<div style={{ property: value }} />`.
Which code does the React example use?
The "Inline Style Objects" snippet uses `<div style={{ property: value }} />`, from the JSX section of the React cheat sheet.
What other React snippets are shown for "style object"?
Besides "Inline Style Objects", this page also shows "Inline Styles".
Is there anything to watch out for?
Yes. For "Inline Style Objects": Style properties use camelCase (backgroundColor, not background-color). Values that need units must include them as strings ("8px"), except for unitless properties like opacity and zIndex which accept numbers.

Browse all tasks by intent