[ 筆記 ] React 04 - 如何寫 CSS

在 React 中有很多種方式可以寫 CSS，例如：

1. inline-style
   • 之前提過可以用 style={} 來寫 inline style
2. HTML 的 CSS link
   • 就是一般傳統寫法，引入一支外部 CSS
3. 使用 webpack 打包
4. styled-components

inline-style 寫法

inline style 裡面是放 object

• 在 React 裡面寫 inline-style，用 - 連接的 CSS 屬性名稱都會轉成駝峰式命名：
  • font-size => fontSize

class App extends Component {
  render() {
    const name = 'title';
    const style = {
      color: 'grey',
      fontSize: '30px', // => Camel-Case
    }
    return (
      <div className={name + '1'} style={style} data-id='1'> // => className
        <Title />
        <Text />
      </div>
    )
  }
}

使用 webpack 打包

• 安裝 style-loader、css-loader，目的是幫助我們將 CSS 載入進來

npm install sass-loader sass --save-dev
npm install --save-dev style-loader
npm install --save-dev css-loader

• 修改 webpack.config.js，新增一條 rules 規則

  {
  test: /\.s[ac]ss$/i,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
        // => 順序很重要、要搞清楚，webpack 會由後往前跑 loader
  ],
  }
  

• 在 src/ 資料夾底下新增一個 CSS 檔案，隨便寫個樣式
• 回到 app.js 裡面把 CSS 檔案 import 進來

// app.js
import './style.css';

• 重新運行 npm run start，成功的話就會發現 CSS 被 load 進來囉！

那這樣用 webpack 打包 CSS 的好處是什麼？

• load 進來的 CSS 也能有即時更新的功能，開發時更加方便。
• 可以一個 Component 就用一個 CSS，如果要用其他的 CSS 相關套件
  • 例如 postcss, sass, css-minify… 只要去載入相對應的 loader 就 OK 囉！

styled-components

styled-components 是一個 library，算是目前一個滿主流的用法，用法很特別，有興趣了解更多可以看 官網教學

• 安裝 styled-components

npm install --save styled-components

• 把 style import 進來

// app.js
import styled from 'styled-components';

• 開始用 styled-components 寫 CSS

const Header = styled.h1` // => 定義一個 h1 樣式，名為 Header
  color: green;
  font-size: 50px;
`

const Title = (props) => {
  return (
    <Header onClick={() => { // => 編譯的時候，<Header> 就會變 <h1>
      props.changeCounter(Math.random())
    }}>{props.text}</Header>
  )
}

背後的原理就是他會隨機幫你產生個亂數 class，並把剛剛的 style 加上去。
而 styled-components 真正厲害的點是可以根據 props 的不同，去改變 CSS。