astro 支持通过 `class` 属性向子组件传递样式类，但需规避 javascript 保留字限制，并正确合并原有类与新增类，确保样式可复用、可覆盖且兼容作用域样式。
在 Astro 中，直接使用 class 作为组件 prop 名称会引发语法错误——因为 class 是 JavaScript 的保留关键字。因此，必须对传入的 class prop 进行重命名解构（如 class: className），再结合 class:list 指令实现安全、灵活的类名合并。这种方式既能保留组件内置的默认样式类（如 bg-blue-gray rounded-lg p-4），又能按需注入视图特定的覆盖类（如 bg-secondary），且完全兼容 Astro 的作用域样式（Scoped CSS）机制。
✅ 正确实现方式：解构 + class:list + 扩展运算符
以 ExpansionQuestion.astro 组件为例，其根元素原为：
我们希望在某处调用时追加 bg-secondary，同时不破坏原有类。需按以下三步改造：
- 在组件顶部脚本中解构并重命名 class prop，并使用 ...rest 保留其他属性（保障 slot、data-*、aria-* 等透传及作用域样式正常工作）；
- 使用 class:list 指令合并默认类与传入类（支持字符串、数组、对象等多种格式，自动去重、忽略空值）；
- 将 ...rest 展开到根元素上，确保事件绑定、自定义属性等不受影响。
---
// ExpansionQuestion.astro
const { class: className, ...rest } = Astro.props;
---
? class:list 是 Astro 推荐的最佳实践：它比字符串拼接更健壮（自动过滤 undefined/null/空字符串），比 class={...} 更语义化，且原生支持响应式类名逻辑（如 className ? 'active' : 'inactive'）。
? 父组件调用示例
在需要定制样式的页面中，直接传入 class 属性即可：
立即学习“前端免费学习笔记（深入）”；
---
import ExpansionQuestion from '@/components/ExpansionQuestion.astro';
const question = {
question: "什么是 Astro？",
answer: "Astro 是一个专注于性能的静态站点生成器...
"
};
---
渲染结果为：
⚠️ 注意事项与最佳实践
- 不要使用 class={...} 字符串拼接：易出错（如多余空格、重复类）、不兼容作用域样式、无法处理条件类；
- 始终搭配 ...rest：否则 slot、data-*、aria-* 等属性将丢失，且作用域样式（.astro-xxx）无法正确挂载；
- 避免在 class:list 中硬编码重复类：如默认已含 rounded-lg，就不应在 className 中再次传入，除非有意覆盖；
- CSS 优先级由顺序决定：后声明的类（className 在 class:list 数组中靠后）具有更高权重，便于覆盖默认样式；
- 若需动态控制多个条件类，可直接在数组中使用三元表达式或函数：
class:list={[ "base-class", isActive && "active", isDisabled && "opacity-50 cursor-not-allowed", className ]}
通过这一模式，你既能保持组件的封装性与一致性，又能实现精准、可控的样式定制——真正践行“一次编写，多处复用”的现代前端理念。
