[React][✍練習]套用 css-in-js (Emotion 庫) 撰寫 CSS

[✍練習 ing]

練習 React JS 寫法與 css-in-js( Emotion 庫) 撰寫 CSS

一般要在 React 中撰寫 CSS 有幾種做法

1.撰寫在.CSS 檔案，再 import 套用。

• 把 css 寫在不同檔案中

  import "./styles.css";
  <div className="App">   可定義 className

  不便性：會需要考慮 CSS 優先度問題

  2.直接在對應地方用 style={JS 寫法} 撰寫

• 直接用 Inline-style 在屬性中加入 style

  <h2 style ={{color:'red', backgroundColor: "#3f51b5"}}>JS 寫法</h2>
  裡面是 JS 寫法，值需加''，且-需改成駱駝式寫法(不能含-字元)

  不便性：會需要轉成 JS 寫法，有插件工具可以幫忙轉

3.套用 css-in-js 庫 直接撰寫 CSS，不用再改 JS 寫法啦

而 css-in-js 庫的主要有：styled-components, emotion, glamorous。

練習用 emotion 庫撰寫 CSS

• Emotion 是一個旨在使用 JavaScript 編寫 CSS 樣式的庫 - 加上兩個反引號，之間就可以直接撰寫 CSS，有 styled 寫法，本篇主要用這個練習看看。
• styled 寫法
  要建立 < div> 標籤樣式時，使用 styled.div；如果要建立的是 < button> 則是使用 styled.button 以此類推。

套用 emotion 庫撰寫

基礎使用方法：

1. 安裝 npm install –save emotion
2. 引入用 className 屬性套用

   import { css } from "emotion";
   const myStyle = css`
     color: rebeccapurple;
   `
    <div className="myStyle ">myStyle 樣式</div>

   更多範例可以看 NPM 上的 emotion 庫介紹emotion

套用@emotion/styled

基礎使用方法：

1. 引入 npm i @emotion/styled
2. 撰寫標籤 tag

   const Container = styled.div` //外面
     background-color: skyblue;
   `;
   ...
   return (
       <Container  >
        </Container >
     );
       

• 變數修改方法

  let displayNone = "block"
  
  const Modal = styled.div`
  display: ${displayNone}; 
    `;

套用@emotion/core 庫撰寫

官方推薦＠＠ 但使用上有一些限制

基礎使用方法：

1. 引入 npm i @emotion/core
2. 引入後用 css 屬性套用

   /** @jsx jsx */ import { css, jsx } from "@emotion/core"; 
   //在無法配置 babel 配置（create-react-app，codesandbox 等）的項目中
   一定要加前述/** @jsx jsx */ 才有效果喔！！！之前漏了查好久＠＠
   
   定義常數，CSS 區塊要用 css`` 包起來
     const TextRed = css`
       color: red;
     `;
   
   然後在要套用的地方加上 css={xxx}
     <h2 css={TextRed}>emotion css 寫法</h2>

   更多介紹範例： emotion Introduction

---

練習區✍

持續練習其他進階套用法並更新在範例檔案中 ex: 多重套用，階層樣式，標籤樣式…

*可側邊開啟程式碼
（如有更好的寫法介紹還請多多指教，謝謝🙏）

開發插件 in vscode

vscode 中有一些針對 css-in-js 的插件可以幫助開發效率．

Css-in-js

可以透過指令將 CSS 選取後切換 css & css-in-js 寫法，不用再自己改半天啦！！

vscode-styled-components

可以自動完成在 css-in-js 區塊裡面的 css 補全提示．

---

網路參考文章

連結	摘要與大致內容
【Day 10】CSS && Inline-style	React CSS && Inline-style 介紹，JS 物件寫法。
https://github.com/rtsao/csjs/wiki/How-to-apply-multiple-classnames-to-an-element	多重 classnames 寫法
谈一谈在 React 项目中使用 css-in-js 方案	鉴于 emotion 已经支持了 styled 模式，可以优先选择 emotion。內涵 emotion 用法示例 (進階 待看 ☐👈)
[Day 14 - 即時天氣] 把 CSS 寫在 JavaScript 中！？ - CSS in JS 的使用	使用 emotion 撰寫 styled components
介紹撰寫 React CSS 的神套件 Styled Components	Styled Components sample
emotion Composition	套用兩個樣式寫法
https://stackoverflow.com/questions/53803466/what-does-the-comment-jsx-jsx-do-in-the-emotion-css-in-js-library	解釋要在 import 前加上/ ** @jsx jsx * /的原因
https://emotion.sh/docs/css-prop#jsx-pragma	在文件頂部設置 jsx 編譯指示才可以使用 css prop。尤其在無法配置 babel 配置（create-react-app，codesandbox 等）的項目中。
change-style-of-material-ui-textfield	更改 material-ui 樣式的發問
Why you shouldn’t use @emotion/core	有一篇文章分析不應使用 emotion/core 的原因