What is a Transient Prop?
A transient prop is a special prop in styled-components that starts with a dollar sign ($). Example: Inside the styled component: const StyledRow = styled.div` grid-template-columns: ${(props) => props.$columns}; `; The $ tells styled-components: "This prop is only for styling. Do not pass it to the HTML element." Sometimes we pass values only to generate CSS. For example: Number of grid columns Background color Padding Width Border radius Active state These values are needed by styled-component
A transient prop is a special prop in styled-components that starts with a dollar sign ($).
Example:
<StyledRow $columns="1fr 2fr 1fr" />
Enter fullscreen mode Exit fullscreen mode
Inside the styled component:
const StyledRow = styled.div`
grid-template-columns: ${(props) => props.$columns};
`;
Enter fullscreen mode Exit fullscreen mode
The $ tells styled-components:
"This prop is only for styling. Do not pass it to the HTML element."
Why do Transient Props exist?
Sometimes we pass values only to generate CSS.
For example:
- Number of grid columns
- Background color
- Padding
- Width
- Border radius
- Active state
These values are needed by styled-components, but the browser's HTML elements (div, button, section, etc.) do not understand them.
Without transient props, React forwards those props to the DOM, which causes warnings like:
Warning: Unknown prop "columns" on <div>.
Enter fullscreen mode Exit fullscreen mode
Transient props solve this problem by keeping styling props inside styled-components and preventing them from reaching the DOM.
Normal Prop vs Transient Prop
Normal Prop
<StyledRow columns="1fr 2fr" />
Enter fullscreen mode Exit fullscreen mode
const StyledRow = styled.div`
grid-template-columns: ${(props) => props.columns};
`;
Enter fullscreen mode Exit fullscreen mode
React renders:
<div columns="1fr 2fr"></div>
Enter fullscreen mode Exit fullscreen mode
Since columns is not a valid HTML attribute, React shows a warning.
Transient Prop
<StyledRow $columns="1fr 2fr" />
Enter fullscreen mode Exit fullscreen mode
const StyledRow = styled.div`
grid-template-columns: ${(props) => props.$columns};
`;
Enter fullscreen mode Exit fullscreen mode
React renders:
<div></div>
Enter fullscreen mode Exit fullscreen mode
The $columns prop is used only by styled-components to generate CSS and is not passed to the DOM.
Key Differences
| Normal Prop | Transient Prop |
|---|---|
columns |
$columns |
| Passed to the DOM | Not passed to the DOM |
| Can trigger React warnings | Prevents React warnings |
| Used for component logic or data | Used only for styling |
When Should You Use Transient Props?
Use transient props whenever a prop is only needed for styling.
Examples:
<Button $primary />
<Card $active />
<Box $padding="2rem" />
<Grid $columns="1fr 2fr 1fr" />
Enter fullscreen mode Exit fullscreen mode
If the prop is only used to create CSS and should not become an HTML attribute, make it a transient prop by adding the $ prefix.
Summary
A transient prop is a styled-components feature that uses the $ prefix to mark styling-only props. These props are available inside the styled component but are not forwarded to the browser's HTML elements. This keeps the DOM clean, avoids React warnings, and makes your components easier to maintain.
