スタイル風コンポーネントの使用方法

導入
何か新しいことを学ぶ時間です.昨日、私はTrewindCSSについてのFireshipsビデオを見ました.最初は、読みやすさと新しい言語の学習のため、私はそれがあまり好きではありませんでした.
それで、私は反応で最初のボタン構成要素をつくり始めました.
私はもっと多くを作成したいという知識で、私はすぐにスタイルのコンポーネントを使用してコンポーネントを作成する簡単な方法を逃した.
私は持ち去られて、私自身にスタイルの構成要素のバージョンを作りました.クラス名を引数として受け取るという違いがあります.

Tailwind風スタイルコンポーネント
(ただし、コールしたい場合).
開発はとても簡単だった.しかし、私もtypescriptを使いたかったです.
正しいタイピングを見つけることは、私に達成するのに長い間かかりました.結局、やっとプロトタイプを完成させました.使い方を以下に示します.

export const Button = tailwind.button`px-2 py-1 m-5 bg-green-500 rounded-md`

そして、あなたが組み合わせることができる異なったスタイルのセットを持っていることも役に立つと思いました.

const spacing = "px-2 py-1 m-5"
const primary = "bg-red-500"
const rounded = "rounded-md"

export const Button = tailwind_fn.button(spacing, primary, rounded)

今、私はそれを誇りに思っています、そして、私の前のゴールについて忘れてください
ソースコードに興味があるなら、私はpastebinにアップロードしました.
それはコードのちょうど50行です!

もうそこに
また、研究を行った後に、これは明らかに前に可能でした.

An Efficient React + TailwindCSS + Styled Components Workflow

Derek Shanks ・ Jan 22 '20 ・ 6 min read

#javascript #react #webdev #tutorial

それで
読書に感謝していて、良い日を持っています:D
以下のようにしてください