正确做法是用wrapper block隔离，将ant design组件作为原子块使用，在其外部包裹符合bem规范的容器，所有定制逻辑落在wrapper上，禁止直接修改其类名。
Ant Design组件不能直接套BEM类名
强行把 ant-btn 改成 button__icon 或 form__ant-btn 会破坏样式隔离和升级路径。Ant Design 的类名是其封装契约的一部分，改了就等于自己维护一份 fork，每次升级都要手动合并冲突。
正确做法：用 wrapper block 隔离并组织布局关系
把 Ant Design 组件当“原子块”使用，在它外部包裹一层符合 BEM 规范的容器，所有定制逻辑和状态控制都落在 wrapper 上：
-
form-field--date包裹<datepicker></datepicker>，样式限定在.form-field--date .ant-picker-input -
search-form__submit是自定义按钮，里面放<button type="primary"></button>，不给 Button 加额外 class - 需要禁用态时，加修饰符到 wrapper：
form-field--date--disabled，再用 CSS 控制内部.ant-picker-input的 opacity 和 pointer-events
动态类名拼接必须防错，别手拼字符串
JSX 中写 className={`form-field${hasError ? ' form-field--error' : ''}`} 看似简单，但容易漏空格、大小写错、或 modifier 名不统一。更稳的方式是封装工厂函数：
const BLOCK = 'form-field';
const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`;
// 使用：
// cn() → 'form-field'
// cn('input') → 'form-field__input'
// cn('input', 'disabled') → 'form-field__input--disabled'
这样能保证双下划线、双破折号、全小写、无冗余连字符全部由函数兜底。
第三方类名不可控，但选择器可以限定作用域
你管不了 .ant-select-selector 怎么生成，但可以确保它只在你的 block 下生效：
- 禁止写全局覆盖：
.ant-select-selector { border: 1px solid red } - 必须加前缀限定：
.form-field--select .ant-select-selector - 若需深度定制且 Ant Design 不支持
classNamePrefix，可用属性选择器兜底：.form-field--select [class^="ant-select"]，但得加外层 class 锁定范围，避免误伤其他页面
BEM 在这里不是用来改别人的名字，而是守住你自己那层边界的清晰性——wrapper 类名一写，谁负责哪块样式、谁该修哪个文件，一眼可查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
