macaron — Colocated CSS-in-JS with zero-runtime
const Button = styled('button', { base: { borderRadius: 6, }, variants: { color: { neutral: { background: 'whitesmoke' }, accent: { background: 'slateblue' }, }, rounded: { true: { borderRadius: 999 }, }, }, compoundVariants: [ { variants: { color: 'neutral', rounded: true, }, style: { background: 'ghostwhite' }, }, ], defaultVariants: { color: 'accent', }, }); <Button color="neutral" rounded> Cli
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
インクリメンタルに新しい技術を取り入れる方法では、VueからReactへ段階的に移行していったという話を紹介していました。 このReactの採用を決定してから大きな論点となったのは、ReactでCSS(スタイル)をどのように書くかについてです。 Reactのスタイリング方法には、デファクトと言えるものはありません。 Styling and CSS – React CSSファイルとclassNameを使う方法、CSSファイルをimportするCSS Modules、JavaScriptでCSSを書くCSS in JSなどさまざまな方法があります。 スタイリングライブラリの選定は、表現力はそこまで大きく変わりませんが選択肢が多過ぎます。 そのため、VueやReactを選ぶといった技術選定よりも難しい部分があります。 KARTE Blocks(以下、Blocks)では、最終的にReactのスタイ
xstyled - A utility-first CSS-in-JS framework built for React. - xstyled
<x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4} alignItems="center" boxShadow borderRadius > <x.div flexShrink={0}> <img height={12} width={12} src="/logo.png" alt="xstyled" /> </x.div> <x.div> <x.h4 text={{ _: "md", lg: "xl" }} fontWeight="medium" color="black" > xstyled </x.h4> <x.p color="gray-500" text="sm" my={1}> A CSS-in-JS framework built for React. </x.p> </x.div> </x.div>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
🐼 Panda v1 🎊 · chakra-ui/panda · Discussion #3321
GitHub - frenic/csstype: Strict TypeScript and Flow types for style based on MDN data
