el-select被div包裹后width:100%失效，因el-select默认inline-block且div未设display:block；需给div加style="width:100%; display: block"或统一用css modules类名、避免scoped样式穿透问题。
el-select被div包裹后width:100%失效
Element UI 的 el-select 在直接使用时能响应父容器宽度，但一旦用自定义 <div> 包裹，<code>style="width: 100%" 就会“失灵”——这不是 bug，而是 Element 内部组件对 display 和 box-sizing 的隐式依赖被破坏了。
根本原因是：Element 的 el-select 默认渲染为 inline-block，而外层 <div> 是块级元素，若未显式设置 <code>display: block 或 width，其计算宽度会退化为内容宽度（content-box），导致 100% 失效。
- 给包裹
<div> 加 <code>style="width: 100%; display: block"（最简解） - 或在 CSS 中写：
.custom-wrapper { width: 100%; }，避免内联样式干扰 - 禁用
el-select自带的inline-block行为：style="width: 100%; display: block !important"—— 仅当其他方式无效时用，!important会削弱后续覆盖能力 - 必须统一走
styles对象：className={`${styles.btn} ${isActive ? styles.active : ''}` - 多条件推荐用
clsx：className={clsx(styles.btn, isActive && styles.active, isDisabled && styles.disabled)} - Taro 用户注意：
config/index.js中需开启cssModules.enable = true，且文件名必须是.module.scss或.module.css - 检查目标元素是否真在当前组件的 DOM 树里（右键 → “Reveal in Elements panel”）
- 若要影响第三方组件内部，改用全局样式（去掉
scoped）或::v-deep（Vue 2）/:deep()（Vue 3） - 确认
<link>顺序：框架 CSS（如 element-ui.css）必须在自定义 CSS 之前，否则你的.custom-wrapper .el-select会被框架默认规则覆盖 - 务必查看浏览器 Network 面板加载的实际 CSS 文件顺序，而不是源
index.html - Vite 用户：禁用
css.preprocessorOptions相关自动注入，或手动用document.head.insertBefore()控制插入位置 - Webpack 用户：确保所有 CSS import 都在入口 JS 最顶部，避免按需加载的 CSS 插入时机不可控
CSS Modules 下 className 拼接导致样式丢失
在 React 或 Taro 中用 styles 对象拼接类名时，混入字面量字符串（如 "primary"）会导致哈希类名断裂，样式无法匹配。
比如：className={`${styles.btn} ${isActive ? 'active' : ''}` 中的 'active' 不会被 CSS Modules 处理，最终生成的 class 是 Button_btn__abc123 active，而实际 CSS 规则是 Button_active__def456，自然不生效。
外部样式被覆盖但开发者工具没显示划掉线
有时你在 DevTools 的 Styles 面板里看不到被划掉的规则，却依然没效果——这往往是因为样式根本没加载，或选择器压根没匹配上目标节点。
典型陷阱是：Vue SFC 的 <style scoped></style> 会让 CSS 只作用于当前组件 DOM，但你写的类名却想影响 el-select 这类第三方组件的内部结构（如 .el-input）。scoped 样式无法穿透子组件 Shadow DOM 或非本组件 DOM。
构建后样式失效但本地正常
Vite 或 Webpack 构建产物中，<link> 顺序可能和源码不一致——尤其当你用了插件动态注入 CSS、或在 JS 中 import './xxx.css'，CSS 合并顺序由模块依赖图决定，而非 HTML 里的书写顺序。
最终 HTML 的 里，你手写的 <link href="app.css"> 可能被插件插入到了框架 CSS 之后，导致权重反转。
真正棘手的从来不是某一行样式写错，而是多个机制叠加后的隐式行为：scoped 的作用域边界、CSS Modules 的哈希映射、构建工具对资源顺序的重排、以及第三方组件对 display/box-sizing 的强假设。修一个地方容易，但得清楚它撬动的是哪几层链条。
