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

1738 ワード

react.js css

群の中で達峰が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の  に ってスタイルのマージを  し、   は  になりません.メンテナンスチームが  したシナリオは  されません...  が  できる  はまあまあだと いますが...しかし、  は だった.

[iOS]無視されたmain関数

railsとjwtでswiftアプリケーションのログイン機能を実装する