DEV Community

Usama
Usama

Posted on

What is a Transient Prop?

#css #javascript #react #frontend

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.

Top comments (0)