glamorousってどうでしょう JS日報 2017/11/7

css-inのライブラリとしてはstyled-componentが一番人気ですが、これと似たようなものでglamorousというライブラリを見つけました。

github.com

PayPalが作っているようですね、公式サイトの色彩がちょっと鮮やかすぎ...

こちらのブログによると、

Introducing glamorous 💄 – kentcdodds

Styled-Componentと同等の使い方の他にCSSを設定したオブジェクトをあらかじめ生成しなくても、jsxの中で直接利用できるのが特徴だそうです。

const { Div, A } = glamorous
function App() {
  return (
    <Div
      textAlign="center"
      color="red"
    >
      <A
        href="https://brave.com/"
        textDecoration="none"
        color="darkorange"
        textShadow="1px 1px 2px orange"
      >
        Browse faster and safer with Brave.
      </A>
      <div>
        It's fast, fun, and safe!
      </div>
    </Div>
  )
}

記事中では変数を命名するのは負担だからこの機能はいい！と好意的ですが私も同感です。
登場した時期が分からないですがStyled-Componentより後発ですし、今後はこちらが主流になっていくかもしれません。

機会があれば採用してみたいですね〜。