Typed style props
A reusable component accepts caller-provided inline styles.
React 19+ · Type Alias
CSSProperties
React.CSSProperties types an object passed to a component’s style prop. It supports valid CSS properties and editor autocomplete for inline styles.
How it works
Use React.CSSProperties to type an object supplied to a component's style prop. It covers the available CSS properties, helps reject invalid property names, and enables editor completion; CSS property names use camelCase in React.
Syntax
interface MyComponentProps {
style: React.CSSProperties;
}Parameters
| Name | Type | Description |
|---|---|---|
style | React.CSSProperties | An object containing CSS declarations passed to the component's style prop. |
Returns
A type used to describe an object passed to a React style prop; it does not produce a runtime value.
Key points
- Annotate a component's style prop with React.CSSProperties when accepting inline styles.
- The type represents the available CSS property names and their value forms.
- Type checking helps catch invalid CSS property names in inline-style objects.
- Editors can provide completion for CSS property names and values when this type is used.
Example: Typed inline styles
interface BadgeProps {
style?: React.CSSProperties;
}
function Badge({ style }: BadgeProps) {
return <span style={{ ...style, fontWeight: "bold" }}>New</span>;
}
export default function App() {
return <Badge style={{ color: "rebeccapurple", marginTop: 8 }} />;
}The prop accepts a typed inline-style object, while the component adds its own style values.
When to use it
Dynamic inline styling
A style value depends on component state or data.
Validated CSS objects
A codebase uses TypeScript and needs editor completion for CSS declarations.
Related
style propclassNameTypeScript