前面提到撰寫 Astro 元件所需要知道的基本知識，在本章節將會更進一步說明如何為元件撰寫添加樣式。
在 Astro 中撰寫樣式是一件非常容易的事，並且有多樣選項可供挑選。像是使用 Sass、Less 這類預處理語言或是透過插件整合添加 Tailwind，或是撰寫 Scoped CSS。
可以在客戶端模板部分添加 <style> 標籤來為元件或頁面模板添加樣式，預設會被自動的封裝使其作用在該元件之中，舉例來說以下的元件樣式：
<style>
h1 {
color: red;
}
.text {
color: blue;
}
</style>
會自動渲染出這樣的結果來讓樣式只作用在該元件之中：
<style>
h1[data-astro-cid-hhnqfkh6] {
color: red;
}
.text[data-astro-cid-hhnqfkh6] {
color: blue;
}
</style>
這種樣式被侷限在元件範圍的特性讓元件與元件之間保留了邊界，可以自由的撰寫元件內的樣式而不用擔心樣式互相汙染干擾。
在元件內依然可以撰寫全域的 CSS ，但並不推薦，原因是因為散落包含全域樣式的組件可能會導致錯誤排查困難。一共有三種方法來撰寫全域樣式：
<style is:global>
/* 直接套用至網站上所有的 <h1> 標籤 */
h1 { color: red; }
</style>
或者使用 :global() 來達成：
<style>
:global(h1) {
color: red;
}
</style>
當然也可以自由額外撰寫 CSS 檔案在 src 資料夾當中，並根據需要引入：
import '../styles/global.css';
import 'package-name/styles.css';
class:list 組合 class如果需要動態的組合 class 可以使用 [class:list](https://docs.astro.build/zh-cn/reference/directives-reference/#classlist) 工具屬性來達成：
---
const { isRed } = Astro.props;
---
<!-- 如果 `isRed` 為真值, class 將會是 "box red" -->
<!-- 如果 `isRed` 為假值, class 將會是 "box" -->
<div class:list={['box', { red: isRed }]}><slot /></div>
define:vars 使用 CSS 變數<style> 標籤除了可以讀取整個頁面存在的 CSS 變數之外，也可以透過 define:vars 工具屬性來達成創建元件 CSS 的變數。
---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
---
<style define:vars={{ foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--foregroundColor);
}
</style>
<h1>Hello</h1>
具體來說 Astro 會自動在該元件最外層的元素使用行內 CSS 添加 CSS 變數，如此一來整個元素便能使用該變數。
class 屬性在使用 Props 傳遞 class 屬性時須留意 class 在 JavaScript 中是保留字，應適當更改變數名稱。
---
const { class: className } = Astro.props;
---
<div class={className}>
<slot/>
</div>
到此基本的 Astro 樣式使用方式都介紹完畢了！其他像是 CSS 預處理器 或是整合插件像是 Tailwind 都可以從文檔中找到說明，Tailwind 在後期章節我會花更多篇幅介紹如何整合入 Astro 專案之中。
綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS，不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援，引入時相互覆蓋的優先權如下：
<link> 標籤在 <head> 當中（最低優先權）import 樣式(目前 iT 邦不支援 Astro 語法的高光😅，因此歡迎到我的部落格閱讀本系列相關文章，正同步更新中！)
iThome鐵人賽
看影片追技術