styled-components で $ プレフィックスをつけることを、「Transient props」と呼ばれています。
これは、スタイリングのために内部的に使用されることを明示し、基礎となる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するコンポーネントまで転送したくない時に役立ちます。
