styled-componentsのpropsにつける「$」プレフィックスについて

styled-components で $ プレフィックスをつけることを、「Transient props」と呼ばれています。

styled-components

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

これは、スタイリングのために内部的に使用されることを明示し、基礎となるReactノードに渡すことを防ぐために利用します。

例えば、次のようなコードがあるとします。

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

この時、基礎となるHeaderコンポーネントまで渡されることになります。

customColorプロパティがHeaderコンポーネントに転送するべきでない場合は、$プレフィックスをつけることでtransient propsとして利用できるようになります。

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

これの活躍する場面は、外部ライブラリのコンポーネントを利用しているときに、styledするコンポーネントまで転送したくない時に役立ちます。