React×TypeScriptでfower使うとき

fower とは

https://fower.vercel.app/

以下のコンセプトで作成されたスタイリングツール。（引用元: https://fower.vercel.app/blog#core-concept)

• ユーティリティーファースト
• 型安全
• フレームワーク非依存
• CSS in JS

好きだ

Component 化したい

Button という Component を作って,それを使うときに fower で margin とかを当てたい

import {VFC} from 'react';
import {Box} from '@fower/react';
import {AtomicProps} from '@fower/types';

// AtomicPropsがスタイルの型と統合しておく
type ButtonProps = AtomicProps & {
  label: string;
  onClick?: () => void;
  color?: string; // これがないとTypeError
};

export const Button: VFC<ButtonProps> = ({label, onClick, color, ...props}) => {
  return (
    <Box
      as='button'
      fontBold // 共通するやつ適当に
      white
      bgBlack
      rounded-8
      px6
      onClick={onClick}
      {...props} // 親から受け取ったスタイルをここへ
    >
      {label}
    </Box>
  );
};

これで,使うときに

<Button m-12 label='ボタン' onClick={() => {}} />

とかでいける.
なぜ color だけ別の型なのか不明...