The ‘$’ prefix on styled-components props

The $ prefix in styled-components is called ‘Transient props’.

styled-components

styled-components: API Reference API Reference of styled-components

This is used to make it explicit that it will be used internally for styling and to prevent it being passed on to the underlying React node.

For example, you have the following code.

import styled from 'styled-components';
import Header from './Header';


const NewHeader = styled(Header)<{ customColor: string }>`
  color: ${(props) => props.customColor};
`;
// Header will also receive props.customColor

At this point, it will even be passed to the underlying Header component.

If the customColour property should not be transferred to the Header component, it can be used as a transient props by adding a $ prefix.

import styled from 'styled-components';
import Header from './Header';


const NewHeader2 = styled(Header)<{ $customColor: string }>`
  color: ${(props) => props.$customColor};
`;
// Header does NOT receive props.$customColor

This is useful when you are using components from external libraries and do not want to transfer them to the component to be styled.