---
order: 6
title: 修改樣式
type: 開發
---
這篇文檔主要針對如何在項目中使用和規劃樣式文件進行介紹，如果想獲取基礎的 CSS 知識或查閱屬性，可以參考 [MDN 文檔](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference)。
## less
Ant Design Pro 默認使用 less 作為樣式語言，建議在使用前或者遇到疑問時學習一下 [less](http://lesscss.org/) 的相關特性。
## CSS Modules
在樣式開發過程中，有兩個問題比較突出：
- 全局污染 —— CSS 文件中的選擇器是全局生效的，不同文件中的同名選擇器，根據 build 后生成文件中的先后順序，后面的樣式會將前面的覆蓋；
- 選擇器復雜 —— 為了避免上面的問題，我們在編寫樣式的時候不得不小心翼翼，類名里會帶上限制范圍的標識，變得越來越長，多人開發時還很容易導致命名風格混亂，一個元素上使用的選擇器個數也可能越來越多。
為了解決上述問題，我們的腳手架默認使用 CSS Modules 模塊化方案，先來看下在這種模式下怎么寫樣式。
```tsx
// example.ts
import styles from './example.less';
export default ({ title }) => <div className={styles.title}>{title}</div>;
```
```css
// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}
```
用 less 寫樣式好像沒什么改變，只是類名比較簡單（實際項目中也是這樣），js 文件的改變就是在設置 className 時，用一個對象屬性取代了原來的字符串，屬性名跟 less 文件中對應的類名相同，對象從 less 文件中引入。
在上面的樣式文件中，`.title` 只會在本文件生效，你可以在其他任意文件中使用同名選擇器，也不會對這里造成影響。不過有的時候，我們就是想要一個全局生效的樣式呢？可以使用 `:global`。
```css
// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}
/* 定義全局樣式 */
:global(.text) {
font-size: 16px;
}
/* 定義多個全局樣式 */
:global {
.footer {
color: #ccc;
}
.sider {
background: #ebebeb;
}
}
```
CSS Modules 的基本原理很簡單，就是對每個類名（非 :global 聲明的）按照一定規則進行轉換，保證它的唯一性。如果在瀏覽器里查看這個示例的 dom 結構，你會發現實際渲染出來是這樣的：
```html
<div class="title___3TqAx">title</div>
```
類名被自動添加了一個 hash 值，這保證了它的唯一性。
除了上面的基礎知識，還有一些關鍵點需要注意：
- CSS Modules 只會對 `className` 以及 `id` 進行轉換，其他的比如屬性選擇器，標簽選擇器都不進行處理，推薦盡量使用 className。
- 由于不用擔心類名重復，你的 className 可以在基本語意化的前提下盡量簡單一點兒。
上面只對 CSS Modules 進行了最基礎的介紹，有興趣可以參考其他文檔：
- [github/css-modules](https://github.com/css-modules/css-modules)
- [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)
- [CSS Modules 詳解及 React 中實踐](https://github.com/camsong/blog/issues/5)
## 樣式文件類別
在一個項目中，樣式文件根據功能不同，可以劃分為不同的類別。
### src/index.less
全局樣式文件，在這里你可以進行一些通用設置，比如腳手架中自帶的：
```css
html,
body,
:global(#root) {
height: 100%;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// temporary font size patch
:global(.ant-tag) {
font-size: 12px;
}
```
> 因為 antd 中會自帶一些全局設置，如字號，顏色，行高等，所以在這里，你只需要關注自己的個性化需求即可，不用進行大量的 reset。
### src/utils/utils.less
這里可以放置一些工具函數供調用，比如清除浮動 `.clearfix`。
### 模塊樣式
針對某個模塊/頁面生效的文件。
#### 通用模塊級
例如 `src/layouts/BasicLayout.less`，里面包含一些基本布局的樣式，被 `src/layouts/BasicLayout.ts` 引用，項目中使用這種布局的頁面就不需要再關心整體布局的設置。如果你的項目中需要使用其他布局，也建議將布局相關的 js 和 less 放在這里 `src/layouts`。
#### 頁面級
具體頁面相關的樣式，例如 `src/routes/Dashborad/Monitor.less`，里面的內容僅和本頁面的內容相關。一般情況下，如果不是頁面內容特別復雜，有了前面全局樣式、通用模塊樣式的配合，這里要寫的應該不多。
#### 組件級
這個也很簡單，就是組件相關的樣式了，有一些在頁面中重復使用的片段或相對獨立的功能，你可以提煉成組件，相關的樣式也應該提煉出來放在組件中，而不是混淆在頁面里。
> 以上樣式類別都是針對獨立的樣式文件，有時樣式配置特別簡單，也沒有重復使用，你也可以用內聯樣式 `style={{ ... }}` 來設置。
## 覆蓋組件樣式
由于業務的個性化需求，我們經常會遇到需要覆蓋組件樣式的情況，這里舉個簡單的例子。
antd Select 在多選狀態下，默認會展示所有選中項，這里我們給它加一個限制高度，超過此高度就出滾動條。
```js
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode
);
```
```css
// TestPage.less
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
```
方法很簡單，有兩點需要注意：
- 引入的 antd 組件類名沒有被 CSS Modules 轉化，所以被覆蓋的類名 `.ant-select-selection` 必須放到 `:global` 中。
- 因為上一條的關系，覆蓋是全局性的。為了防止對其他 Select 組件造成影響，所以需要包裹額外的 className 限制樣式的生效范圍。
