Obake Engineer Blog

TypeScript環境でEmotionのスタイル指定に任意のpropsを渡す方法

Emotion TypeScript React

2022/08/14

渡すpropsの型を指定しないとエラーになってしまう。

やり方

これではエラーになるので、

import styled from '@emotion/styled'

const H1 = styled.h1`
  padding-top: ${(props) => props.someNumber};
`;

const Component = () => <H1 someNumber={16}>hoge</H1>;

ジェネリクスを使って型を指定する

import styled from '@emotion/styled'

type HeadingProps = {
  someNumber: number;
};

const H1 = styled.h1<HeadingProps>`
  padding-top: ${(props) => props.someNumber};
`;

const Component = () => <H1 someNumber={16}>hoge</H1>;

参考

Related Posts