xStyled

https://gyazo.com/5203ee172da722edb6a245198177013e

code:例.jsx

<x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>

...

</div>

code:jsx

import styled from '@xstyled/...'

const Button = styled.button`

border-radius: md;

..

`

hooksもいっぱい

theme

colorやfont-sizeなどをここに定義して一括管理ができる

型

xstledに限らないが、JSXにごちゃごちゃ書くことのメリットがあまりわからない

ただでさえPropsでごちゃつくのに

JSXに直がきすると、スタイルの再利用しづらくない？

それよりも具体化されているから使いやすいのか？

初期の学習コスト高くね？？

Extending styleできないのか？？

classnameで拡張するやつ

高さ指定していないかつx.buttonで作ったComponentを外からheight付けたりするのどうやってやるんだよ

code:ts

const A = () => {

return (

<x.div>

<Button h={100}>

<x.div>

)

}

const Button = () => <x.button>hoge</x.button>

参考までにVer1時の書き方

styled-componentsの拡張みたいな感じ

code:jsx

import styled from '@xstyled/styled-components'

const Box = styled.div`

background-color: primary; /* ⟶ theme.colors.primary */

margin: 2; /* ⟶ theme.space.2 */

`

export default Box