Lala Code

Lala 的前端大補帖，歡迎一起鑽研前端技術😊

0%

【DAY 11】設定樣式 CSS 與 Style，美化你的網站

發表於 分類於 Disqus：

cover

［情境任務］

解師傅：太好了，菜單該有的功能都有了，這麼一來就萬無一失了！

小當家：恩…萬事俱備，只欠東風

解師傅：欸？…還需要什麼東風？

小當家：我一直很想說，你們不覺得這菜單長得很醜嗎．．．

解師傅：難怪我覺得看久了眼睛有點痛…(掩面)

我們需要排版跟樣式的協助，來吸引更多的客人，我們來幫忙美化一下吧！！

如果要使用 CSS 的預處理器，需要先安裝 sass

安裝 SASS

1
2
3
4
5
// npm
npm i sass

//yarn
yarn add sass

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



樣式的使用方法

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

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


1. 在組件中使用 Style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;

styled-components 可以將 CSS 直接放到組件處理，命名後當成標籤來使用



［任務解題］

我們用了 css module 美化了菜單，看起來順眼多了呢！!



結語

以上介紹了四種方法，可依自己的喜好或情境使用，一起來試試看吧！!

本文為 IT 鐵人賽系列文 你 React 了嗎? 30 天解鎖 React 技能



Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊



🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住



六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！


Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
❤️