前言

在上一章 React 簡單教程-2-ts 和元件引數 中我們新建的子元件 Displayer 沒有樣式，顯得平平無奇，這一篇我們將給他美化一下。

CSS 檔案

一般的做法，是在你的元件級目錄下新建一個和元件同名的 CSS 檔案。如，我們的元件是 displayer.tsx，我們就在同級目錄下新建一個 displayer.css，然後在元件 Displayer 中直接引入這個檔案：

//  引入
import "./displayer.css";

export function Displayer(props: { name: string, content: string }) {
  //  ...
  return (
    <div>
      {/* ... */}
    </div>
  );
}
 

我們先寫下一個樣式，該樣式將背景變成灰色：

.gray {
  background-color: gray;
}

然後在元件中使用樣式：

//  引入
import "./displayer.css";

export function Displayer(props: { name: string, content: string }) {
  const name = props.name;
  const content = props.content;
  return (
    //  className，不是 class
    <div className="gray">
      <div>{name}</div>
      <div>{content}</div>
      <Displayer name="My name is App1" content="My content is Aoh!!!1" />
    </div>
  );
}
 

注意在 react 中使用的是 className，而不是和 html 一樣使用 class，這兩者寫法不同而已，功能完全一樣。注意小駝峰寫法。

啟動後介面的效果如下：

你看起效了，我們能夠用我們熟悉的方式來編寫 CSS 樣式。

我們簡單美化一下，將子元件的樣式做得好看一點：

CSS 程式碼：

.container {
  background-color: rgb(40 40 40);
  color: white;
  padding: 0.5rem;
  margin: 0.5rem;
  border-radius: 10px;
}

.nav {
  display: flex;
  margin-bottom: 0.3rem;
}

.btn-red {
  height: 12px;
  width: 12px;
  background-color: rgb(255, 29, 29);
  border-radius: 15px;
}

.btn-yellow {
  height: 12px;
  width: 12px;
  background-color: rgb(255, 251, 29);
  border-radius: 15px;
  margin: auto 0.5rem;
}

.btn-gray {
  height: 12px;
  width: 12px;
  background-color: rgb(220, 220, 220);
  border-radius: 15px;
}

.body {
  padding: 0.5rem 0;
}
 

元件程式碼

import "./displayer.css";

export function Displayer(props: { name: string, content: string }) {
  const name = props.name;
  const content = props.content;
  return (
    <div className="container">
      <div className="nav">
        <span className="btn-red"></span>
        <span className="btn-yellow"></span>
        <span className="btn-gray"></span>
      </div>
      <div className="body">
        <div>{name}</div>
        <div>{content}</div>
      </div>
    </div>
  );
}

介面效果如下：

稍微好看一點了。以後我們便可以在任何想要的地方使用這個子元件了，而不用跟以前寫原生 HTML 一樣，每個地方都重新寫一遍。

CSS 元件樣式缺陷

如果我們在開發者工具（F12）中檢視頁面的 html 程式碼，我們可以發現我們的樣式是直接在 head 的 style 標籤中。

就連其他元件的樣式也是在 head 的 style 標籤中。這就意味著在不同的元件樣式檔案中，如果出現了相同的 CSS 類名，那麼樣式就會被覆蓋掉。你可以在 App 元件樣式中定義一個 CSS 類，再到 Displayer 的元件樣式中定義一個相同名字不同屬性值的 CSS 類，你會發現 App 元件的樣式就失效了。

在元件裡使用樣式，最好的情況當然是這個元件的樣式不會被其他因素所影響。對於這種情況，一種辦法是給元件樣式起一個獨一無二的名字，比如樣式上加上元件名：

/* 加上元件名 displayer */
.displayer-container {
  /* ... */
}

這種方式寫起來既難受又繁瑣，我推薦的另外一種方式是使用功能類優先的寫法。在我一篇文章 為什麼我在 css 裡使用功能類優先 有描述到這種寫法，使用到的庫是 tailwindcss。

總結

本文我們學了怎麼在 react 元件編寫 CSS 樣式並引用，也探討了直接使用 CSS 檔案的弊端。

在下一章中我將描述怎麼使用 tailwindcss。