Astro 局部样式

局部样式基础

组件样式

在 .astro 组件的模板里写 <style> 标签，Astro 会自动把样式「限定在当前组件」，不会影响别的组件。

---
const { title } = Astro.props; // 接收父组件传来的 title
---
<h2 class="title">{title}</h2>

<style>
  .title {
    color: teal;
    font-size: 1.5rem;
  }
</style>

构建后，Astro 会给这个类名加上一段哈希，变成类似 .title[data-astro-cid-xxx] 的形式，从而保证只在当前组件生效。

为什么需要局部样式

没有局部作用域时，两个组件都写了 .title 就会互相覆盖，Astro 的默认局部化让你放心起名，组件之间彼此隔离，重构时不用担心牵一发动全身。

组合选择器

局部样式里也能写嵌套和组合，作用范围依然只限本组件。

<style>
  .card {
    border: 1px solid #ddd;
  }
  .card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  .card .title {
    font-weight: bold;
  }
</style>

写在 style 里的表达式

<style> 标签也支持花括号插值，方便用脚本里的变量。

---
const brand = '#7c3aed'; // 脚本里的变量可在下方 <style> 中通过 {brand} 引用
---
<style>
  a {
    color: {brand};
  }
</style>

走向全局

全局样式

如果某段样式确实要影响全站（比如重置样式、第三方组件），用 is:global 指令。

<style is:global>
  * {
    box-sizing: border-box;
  }
</style>

也可以只在局部样式里挑出个别规则全局化：

<style>
  .local { color: red; }
  :global(.shared) {
    margin: 0;
  }
</style>

这样 .local 仍是局部的，.shared 则对所有元素生效。

引入外部样式文件

除了写在组件里，也可以引入一个独立的 CSS 文件。

---
import '../styles/global.css'; // 引入的 CSS 会作为全局样式生效
---

注意这样引入的 CSS 会作用于全局，也可以用 <style> 配合 @import，但推荐把全局样式统一放到布局（Astro 布局）里管理。