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};
で型をわたしてるから