What is a Transient Prop?

A transient prop is a special prop in styled-components that starts with a dollar sign ($).

Example:

<StyledRow $columns="1fr 2fr 1fr" />

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."

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>.

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" />

const StyledRow = styled.div`

  grid-template-columns: ${(props) => props.columns};

`;

React renders:

<div columns="1fr 2fr"></div>

Since columns is not a valid HTML attribute, React shows a warning.

Transient Prop

<StyledRow $columns="1fr 2fr" />

const StyledRow = styled.div`

  grid-template-columns: ${(props) => props.$columns};

`;

React renders:

<div></div>

The $columns prop is used only by styled-components to generate CSS and is not passed to the DOM.

Key Differences

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" />

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.