emotionの初歩的な使用に関するメモ

1738 ワード

群の中で達峰がStrikinglyがemotionの案を使っていると大いに話しているのを聞いて、心を留めた.前にCSS in JS案をいくつか見たことがありますが、大体emotionを見たことがありますが、どれがいいか分かりません.https://github.com/MicheleBer...しかし、Strikinglyは実践経験があり、当時も私が気に入ったいくつかの一つであり、安全だと思っていました.https://github.com/emotion-js...
書き方から見ると、侵入性は小さく、直接classNameです.
import styled, { css } from 'react-emotion';

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (

  

Hello World

);

そして生成されたCSSはhashのclassNameに基づいて包まれ、 .
.

, CSS js CSS .
emotion babel plugin , Webpack :
https://github.com/emotion-js...
, .

demo , :
https://github.com/minimal-xy...

, CSS src/の に されたもので、ソースコードと にいて、 し れていて、 の ろにxargと いたコマンドラインは にパッケージ で しました.
エディタのサポートについては、 VSコードを しています. のハイライトと ヒントが です.https://marketplace.visualstu...https://github.com/Microsoft/... のpluginはTypeScriptをローカルにインストールし、2.6.1+に り える があります. は に しました.また、 にPrettierを わせるので、オートフォーマットもできます.
もう つの な はCSSのいくつかの / の であり、まだこれらの を く り げるのに ではない.おおよそ できる だと う. でStrikinglyが かち うのを つ...
CSS
する はissues で に ねて、emotionが したファイルに する について. に つの が つかったのは、 になってからスタイルが われたことだ.コードの 、 は、コードclassNameの がスタイルに しなくなり、 に するemotionがclassNameの に ってスタイルのマージを し、 は になりません.メンテナンスチームが したシナリオは されません... が できる はまあまあだと いますが...しかし、 は だった.