Reactでコンポーネント作成した際のメモ

コンポーネントしたtsxファイル

import RequiredLabel from '../atoms/RequiredLabel';

export type TitleLabelProps = {
  name: string;
  styles: SerializedStyles;
}

export const TitleLabel: React.FC<TitleLabelProps> = (
  props,
) => (
    <div
        css={css`
            display: flex;
            align-items: center;
            line-height: 1;
        `}
    >
        <RequiredLabel />
        <div css={css`
      font-size: 14px;
      ${props.styles};
    `}>{props.name}</div>
    </div>
);
export default TitleLabel;

上記コンポーネントしたファイルをimportして呼び出してるファイルの記載

<TitleLabel 
            name={'きなこ'}
            styles={css`
              color: hotpink;
            `} />

TitleLabelの中で再度cssを追加することができている
なぜか→コンポーネントしたtsxの中で
styles: SerializedStyles;と
${props.styles};
で型をわたしてるから