安裝 SASS

// npm
npm i sass

//yarn
yarn add sass

如此一來，就可以在全局使用 SCSS 或 SASS 了

樣式的使用方法

分享四種調整樣式的方法，可依自己的喜好去使用

在組件中使用 style
全域 CSS
CSS module 模組化
styled-components

1. 在組件中使用 Style

const btn = {
  color: 'red'
};

const Btn = () => {
  return (
    <div>
      <button style={btn}>我是按鈕</button>
      <button style={{color: 'black'}}>我是按鈕</button>
    </div>
  );
}

export default Btn;

不需引入外部的 CSS，直接在組件中寫 style

在 JSX 裡 style 是一個物件，所以需要用物件的方式傳給 style

2. 全域 CSS

btn.scss

1
2
3

.btn {
  color: red;
}

Btn.js

import "./btn.scss";

const Btn = () => {
  return (
    <div>
      <button className="btn">我是按鈕</button>
    </div>
  );
}

export default Btn;

就跟一般寫 CSS 一樣，以 scss 為例，
在專案新增 scss 檔案並載入，加入需要調整的樣式

檔案放哪裡沒有特別規定，有的人將 scss 檔統一放在 style 的資料夾，有的人會跟 .js 檔放在同一個資料夾，依照團隊或個人的習慣去放就可以了

3. CSS module 模組化

btn.module.scss

1
2
3

.btn {
  color: red;
}

Btn.js

import Style from "./btn.scss";

const Btn = () => {
  return (
    <div>
      <button className={Style.btn}>我是按鈕</button>
    </div>
  );
}

export default Btn;

跟上一個用法其實一樣，不同的是附檔名要加上 .module，
module.scss 引入後需要給個命名，以範例為例命名為 Style，

模組化可以避免不同檔案相同 className 的衝突，
.module.scss 檔的樣式只會存在在有引入的頁面

4. styled-components

首先安裝套件

1	npm i styled-components

Btn.js

import styled from "styled-components";

const Button = styled.button`
  width: 100px
`

const ButtonText = styled.span`
  color: red
`

const Btn = () => {
  return (
    <Button>
      <ButtonText>我是按鈕</ButtonText>
    </Button>
  );
}

export default Btn;