@emotion/react での React コンポーネントの書き方 〜〜props から渡す編〜〜
はじめに
こんにちは。kimizuy です。
前回に引き続き、@emotion/react を使った React コンポーネントの基本的なスタイリング例を紹介します。
前回: https://wp.gaji.jp/2021/10/05/8219/
今回は外部からコンポーネントの css prop に対してスタイルを渡す書き方の一例を示します。
例えば className prop だと以下のように書くことを css prop だとどう書くでしょうか。
const LoginButton = ({ className }: Props) => (
<button className={styles.button + (className ? ` ${className}` : "")}>
ログイン
</button>
)あまり @emotion/react を使ったコンポーネントのサンプルが少ないので命名など手探りな部分はありますが、本記事が誰かの一助になれば幸いです。
tldr
css prop には配列を渡すこともできます。
以下のコード例ではコンポーネントは propCss という名前の props を受け取り、それを配列に加えています。
これで、外部から css() で定義されたスタイルを受け取ることができます。
import { css, SerializedStyles } from '@emotion/react'
type StyleProps = {
color?: string
}
type Props = { propCss?: SerializedStyles } & StyleProps
const style = ({ color }: StyleProps) => css`
background-color: blanchedalmond;
color: ${color};
`
export default function HelloWorld({ propCss, ...styles }: Props) {
return <div css={[style(styles), propCss]}>Hello World</div>
}このコンポーネントは以下のように使います。
const style = css`
color: aquamarine;
`
<HelloWorld propCss={style} />注意点なのは className とは違って css という名前で props を定義できないことです（詳しいことはわかってないが、スタイルが反映されない不具合にあった）。
さいごに
今回は css prop に外部からスタイルを渡す書き方についてご紹介しました。
本記事が誰かのお役に立てれば幸いです。
弊社ではJamstackの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
