🗂

React×TypeScriptでfower使うとき

1 min read 4

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 だけ別の型なのか不明...

Discussion

Tailwind に対応した Next.js 作ってる Vercel が出したやつ

ここの情報は正しいでしょうか?それらしい情報を見かけなかったので。

コメントありがとうございます
これ誤字でした...
「対応」ではなく,「対抗」と書きたかったです(対抗が正しいかと言われるとそれはまた微妙ですが...w)
「vercelが出した」は正しいかと思います
修正しました!

ご返信ありがとうございます!
私の指摘も大雑把だったので申し訳ございません。

「vercelが出した」は正しいかと思います

この点が特に違っていると思っています。
もし、 vercel.app のドメインでそう思われているようでしたら、ドキュメントを Vercel でホストしているだけだと思います。(Vercel のホスティングサービスを利用すれば、 vercel.app ドメインが基本的に割り当てられます)
あとは、コミッターを見た限り、 Next.js のコアメンバーが入っている感じもしなかったので…

そうなんですね...
すみません深い背景は全くわからず,この文章はここをリソースにしているだけで信憑性は高くないです!

https://youtu.be/MKZBU5WBrwI
修正の必要性があればPRしていただけると助かります🙇‍♂️
ログインするとコメントできます