patternfly 4+ 强制使用 bem 风格修饰符，pf-m- 是修饰符（modifier）固定前缀，如 pf-m-primary；pf3 的 pf-c-button–primary 已弃用，必须写为 pf-c-button pf-m-primary。
PatternFly 的 css 类名为什么加了 pf-m- 前缀？
因为 PatternFly 4+ 强制使用 BEM 风格的修饰符命名，pf-m-primary、pf-m-expanded 这类写法不是随意加的，而是框架强制约定的修饰符（modifier）标识。不加 pf-m-，样式大概率不会生效。
常见错误现象：button class="pf-c-button pf-c-button--primary" 在 PF4+ 中失效——这是 PF3 的写法，PF4 已废弃双连字符修饰符，全部改为 pf-m- 前缀 + 单连字符。
- PF3 写法：
pf-c-button--primary（已弃用） - PF4+ 正确写法：
pf-c-button pf-m-primary - 必须同时保留基础类
pf-c-button，否则组件结构丢失 - 部分组件（如
pf-c-tabs）还要求父容器带pf-c-tabs__item等嵌套类，只加修饰符不够
直接引入 patternfly.css 后组件没样式？
PatternFly 4+ 不再提供“开箱即用”的单文件 CSS，patternfly.css 只含基础重置和工具类，组件样式需按需导入或通过构建工具加载。
使用场景：你在 HTML 中直接 <link rel="stylesheet" href="node_modules/@patternfly/patternfly/patternfly.css">，但 pf-c-card 没边框、pf-c-dropdown 不弹出——大概率是缺了组件级 CSS。
立即学习“前端免费学习笔记（深入）”；
- 手动补全方式：额外引入
@patternfly/patternfly/components/Card/card.css和layouts/Level/level.css等对应模块 - 推荐做法：用 postcss +
@patternfly/patternfly的 scss 入口（core.scss），避免漏文件 - 注意路径大小写：red Hat 官方包里路径全是小写，
Components写成components才对 - CDN 方式（仅限演示）：可用
https://unpkg.com/@patternfly/patternfly@5.21.0/patternfly-base.css+ 对应组件 CSS，但不建议生产环境用
React 项目里用 @patternfly/react-core 渲染空白？
不是组件没渲染，是 CSS 没接上。React 封装层（如 Button、Page）只输出带 pf-c-* 类名的 dom，不附带任何样式。
错误现象：控制台无报错，jsX 正常执行，但页面显示为裸 HTML —— 文字堆叠、无间距、按钮像普通 <button></button>。
- 必须确保项目中已加载 PatternFly 的 CSS（SCSS 或编译后 CSS），且顺序在自定义样式之前
- 若用 webpack，检查
style-loader和css-loader是否启用，node_modules/@patternfly/patternfly是否在include范围内 - Next.js 用户：需在
_app.tsx中import '@patternfly/patternfly/patternfly.css'，不能只靠组件内 import - 注意版本对齐：
@patternfly/react-core@5.x必须配@patternfly/patternfly@5.x，混用 4.x CSS 会导致pf-m-类名被忽略
自定义主题时覆盖不了 pf-c-button 的颜色？
PatternFly 用 CSS 自定义属性（CSS vars）驱动主题，但变量作用域有层级，直接在 :root 改 --pf-global--primary-color--100 不一定生效。
原因：很多组件颜色不是直读全局变量，而是读组件内部的 --pf-c-button--m-primary--backgroundColor 这类派生变量，而它默认回退到 var(--pf-global--primary-color--100) —— 但这个回退只在变量未被声明时触发。
- 最稳写法：在组件父容器上设变量，例如
<div style="{{">...</div> - 全局改法：确保在
patternfly-base.css加载之后、组件 CSS 加载之前注入自定义 CSS，并用:root声明所有要覆盖的--pf-global-*变量 - 别漏媒体查询变量：暗色模式下 PatternFly 会切换
--pf-global--BackgroundColor--100，需同步覆盖@media (prefers-color-scheme: dark)块内的变量 - 调试技巧：在 DevTools 里选中按钮，看 Computed 面板中
background-color的来源，顺藤摸到具体是哪个 CSS 变量被用了
真正麻烦的是变量链太长，比如 pf-c-dropdown__menu 的背景色经过 3 层 var 回退，中间任一层被意外覆盖就会断掉。动手前先查官方 SCSS 文件里的 @include 层级和 !default 声明位置。