React で css propを子コンポーネントに渡す

前提

• @emotion/reactとmuiを使用しています。

Child Component

import { SerializedStyles } from '@emotion/react'

interface Props {
  className?: string
  css?: SerializedStyles
}

export function Child({ className }: Props) {
  return (
    <div className={className}>
    </div>
  )
}

Parent Component

下記のケースでは、some-classとemotionで作成されたクラス名が、Childの<div className={className}>で適用される。

<Child
  className="some-class"
  css={css`
    color: red;
  `}
/>