xStyled
from CSS Framework
Tailwind CSSインスパイアっぽい
x.div タグに対し、propsでstyleを当てる例.jsx<x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
...
</div>styled-componentsからの移行方法
styled-components風にも書ける
jsximport styled from '@xstyled/...'
const Button = styled.button`
border-radius: md;
color: #fff;
..
`hooksもいっぱい
theme
colorやfont-sizeなどをここに定義して一括管理ができる
型
このを記述しないとエラー出なかった
styled-componentsとその型が必須っぽい
xstledに限らないが、JSXにごちゃごちゃ書くことのメリットがあまりわからない
ただでさえPropsでごちゃつくのに
JSXに直がきすると、スタイルの再利用しづらくない？
styled-componentsにも
css={} あるじゃんそれよりも具体化されているから使いやすいのか？
初期の学習コスト高くね？？
height は h ですよ、みたいなのを一々調べないといけないjこの辺の疑問だいたいここに答え書いてた
Extending styleできないのか？？
classnameで拡張するやつ
高さ指定していないかつx.buttonで作ったComponentを外からheight付けたりするのどうやってやるんだよ
tsconst A = () => {
return (
<x.div>
<Button h={100}>
<x.div>
)
}
const Button = () => <x.button>hoge</x.button>参考までにVer1時の書き方
全く見た目が異なる
styled-componentsの拡張みたいな感じ
jsximport styled from '@xstyled/styled-components'
const Box = styled.div`
background-color: primary; /* ⟶ theme.colors.primary */
margin: 2; /* ⟶ theme.space.2 */
`
export default Box