Style object

2 snippets in React

REReact

Inline Style Objects

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.