Discussion
Closed
現在Reactのスタイリングを以下のような構成で行っています。
CSS in JSはライブラリも書き方も色々あると思うのですが、今からReactでスタイリングを行っていくならどのようなライブラリを用いて、どのような書き方をしていくと良さそうでしょうか。みなさまどのような構成でUIを実装しているのかぜひ教えていただきたいです！
普段からReactをよく使っている者です
自分もstyled-componentsを愛用していましたが、最近はemotionを使っています
https://emotion.sh/docs/introduction
intdoructionの例のように、各要素に直接スタイルを当てることができるのが単純明快です
import { css, jsx } from '@emotion/core'
const color = 'white'
render(
<div
css={css`
padding: 32px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}
>
Hover to change color.
</div>
)
HTMLとCSSは実際には一心同体で使うのにもかかわらず、別々のファイルにclass名でつなげて生合成の合う記述にしたりclass名が重複しないように気をつける必要があり、面倒でした。
styled-componentsの場合、スタイルを含めたコンポーネントの記述を1つのファイルにまとめられるという点でも素晴らしい開発体験を提供してくれましたが、emotionはさらに各要素に直接スタイルを当てることができるのでより直感的だと思います
また、CSS Propsなど機能も豊富で、styled-componentsと同じく styled.div のような書き方も可能です
一度試してみてはいかがでしょうか？
@mikan3rd ありがとうございます！直接スタイルを当てる書き方が一番直感的ですよね 
直接書くく時ってmixin的な処理をする際はどのような書き方になるのでしょうか？今はオブジェクトリテラルで記述しているので、スプレッド演算子とかを使って表現しているのですが...
Composionを使えばmixinと同等のことはできると思います
https://emotion.sh/docs/composition