[ 筆記 ] React 04 - 如何寫 CSS


Posted by krebikshaw on 2020-10-23

在 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-loadercss-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。


#css #styled-components







Related Posts

MTR04_0914

MTR04_0914

在Gatsby GraphQL中組合出完美資料

在Gatsby GraphQL中組合出完美資料

MTR04_0621

MTR04_0621


Comments