Primer CSS按钮样式未生效是因为未显式导入components模块；复用配色需通过@primer/primitives的CSS变量；theme参数仅在Sass中有效；混用Bootstrap/Tailwind时需禁用Primer重置并隔离组件。
为什么直接引入 Primer CSS 后按钮样式没变
Primer CSS 不是开箱即用的“一键美化”工具，它默认只提供基础层（@primer/css 中的 base 和 support），组件样式（如 .btn、.Box）需要显式导入。常见现象是：HTML 里写了 <button class="btn"></button>，但颜色、边框、间距全无——因为 @primer/css 的 components 模块根本没加载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认安装的是
@primer/css（不是已停更的primer-cssnpm 包） - 在入口 CSS 或 Sass 文件中，必须显式引入组件层：
@import "@primer/css/components/index.scss"; - 若用 JS 打包（如 Webpack/Vite），需确保 Sass 加载器启用，并处理
@import路径别名（Primer 内部依赖@primer/primitives，路径解析失败会导致编译静默跳过）
如何复用 GitHub 官方的配色与空间系统
Primer 的设计系统核心是 @primer/primitives，它导出 JSON 和 CSS 变量两套源，但直接读取 variables.css 里的 --color-fg-default 等变量，容易因 scope 隔离失效；而 JS 侧读取 JSON 则可能和 CSS 变量不同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用 CSS 自定义属性：在根元素注入
@import "@primer/primitives/dist/css/variables.css";，再通过var(--color-fg-default)使用 - 避免硬编码值——Primer 的
spacing是 4px 倍数（--space-1: 4px,--space-2: 8px），直接写margin: 8px会脱离设计系统约束 - 注意深色模式切换：Primer 的暗色变量（如
--color-fg-default-dark）需配合@media (prefers-color-scheme: dark)手动覆盖，它不自动绑定系统偏好
自定义主题时 theme 参数为何不生效
Primer 的 theme 功能仅在使用其 Sass API（如 primer-theme() mixin）时起作用，纯 CSS 引入或 CDN 方式完全忽略该参数。典型错误：在 HTML 里加 <link href="https://unpkg.com/@primer/css@24.0.0/dist/primer.css?theme=dark">，但 URL 参数无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Sass 用户：用
$theme: dark;+@include primer-theme();，且必须在@import "@primer/css/scss/theme.scss";之后声明 - CSS 用户：改用官方提供的预构建主题文件，如
@primer/css@24.0.0/dist/primer-dark.css（注意版本号需严格匹配） - 动态切换主题需 JS 配合：移除旧
<link>，插入新主题 CSS，同时手动切换html元素的data-color-mode属性（Primer 依赖此属性触发内部媒体查询）
和 Bootstrap/Tailwind 混用时的冲突点
Primer 的重置样式（base/base.scss）会覆盖全局 button、input 等元素默认样式，与 Bootstrap 的 reboot 或 Tailwind 的 @layer base 直接打架，导致表单控件尺寸错乱、字体继承异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用 Primer 的全局重置：只导入
components和utilities，跳过base（@import "@primer/css/components/index.scss";不含 base） - 避免类名碰撞：Primer 的
.mr-2（margin-right）和 Tailwind 的同名工具类规则来源不同，CSS 优先级取决于加载顺序，而非“谁更权威” - 组件封装隔离：用
<div class="Box"> 包裹 Primer 组件，再用 Tailwind 类控制外边距，别试图给 <code>.btn直接加mt-4真正难的是设计语义对齐——Primer 的
.Label和 Bootstrap 的.form-label视觉相似但 DOM 结构、辅助属性（aria）完全不同，混用时无障碍支持容易断层。
