查清覆盖原因需用开发者工具定位被删样式，确认生效规则顺序及!important影响，避免内联样式干扰；确保自定义样式表后引入、用data属性提权、禁用长选择器；表格适配优先用maxHeight配置项，Vue/React中需穿透scoped作用域。
查清谁在覆盖你的按钮或表格样式
layui 的 .layui-btn、.layui-table 等基础类自带高特异性（比如 button.layui-btn 权重是 (0,0,2,1)），你写的 .my-btn 或 table .my-cell 很容易被静默覆盖。打开浏览器开发者工具（f12），选中元素，在 styles 面板里找带删除线的样式，点开右侧文件名和行号——大概率会跳到 layui.css 里的某一行。
重点看「匹配的 CSS 规则」列表顺序：最底下那条才是生效的；往上翻，就能看到哪些规则被它压住了。别猜，直接禁用上面几条，确认是否是它们导致错乱。
- 注意
!important是否出现在layui.css里（如.layui-btn[disabled]{opacity:.6!important}）——它会让普通覆盖完全失效 - 检查是否有内联样式（
）混入，比如 JS 动态插入的table行高或颜色 - Layui 表格的
.layui-table-body内部 DOM 是动态生成的，你写的.layui-table tr td可能根本没匹配到真实节点
避免直接修改 layui.css 或堆选择器权重
改 layui.css 源文件或写 body .layui-container .layui-table tbody tr:hover 这种长选择器，短期能“赢”，但升级 Layui 后必崩。更稳的做法是控制作用域和加载时机：
- 确保自定义样式表在
<link rel="stylesheet" href="layui/css/layui.css">之后 引入 - 用属性选择器提权但不破坏语义：
table[data-ui="my-table"] .layui-table-cell比.layui-table .my-cell更安全 - 给关键容器加唯一
data-属性，例如<div class="layui-table" data-module="user-list">，再写div[data-module="user-list"] .layui-btn - 慎用
:is()或:where()降权重置：:where(.layui-btn).my-primary { background: #007bff; }权重等同于.my-primary，不会意外压过其他模块
表格行高、max-height 适配失效时怎么调
Layui 表格默认不设容器高度，一旦加了 max-height，内容溢出后滚动条出现，但行高可能塌陷或错位——这不是 bug，是 CSS 层叠与 DOM 结构共同作用的结果。Layui 2.8+ 支持原生 maxHeight 配置项，比手动套 div 容器更可靠：
table.render({
elem: '#test',
url: '/api/users',
maxHeight: 500,
cols: [[
{field: 'username', title: '用户名', minWidth: 120},
{field: 'email', title: '邮箱', minWidth: 200}
]]
});
- 别对
.layui-table-body手动设height或overflow，Layui 会自己处理滚动逻辑 - 如果用了自定义 CSS 控制行高（如
.layui-table tbody tr { height: 42px; }），务必加上line-height匹配，否则文字会偏移 - 遇到 IE11 下
maxHeight不生效，回退用容器包裹 +overflow-y: auto，但需同步设置.layui-table-box的position: relative
Vue / React 项目里用 Layui 的样式隔离难点
Layui 是全局样式框架，而 Vue 的 <style scoped> 或 React 的 CSS Modules 会自动加属性选择器（如 div[data-v-abc123]）。结果就是你写了 .layui-btn，但实际渲染的按钮是 <button class="layui-btn" data-v-abc123>，你的规则根本匹配不到。
立即学习“前端免费学习笔记（深入）”；
- 方案一：把 Layui 样式引入放到
<head>最外层，不在组件 scope 内；自定义样式另起一个非 scoped 的<style>块 - 方案二：用
:deep(.layui-btn)（Vue）或:global(.layui-btn)（CSS Modules）穿透作用域 - 方案三：彻底放弃 Layui 的 class 名，只用它的 JS 行为（如
table.render），所有 UI 完全用项目自己的 CSS 重绘，通过done回调注入 DOM - 特别注意 Shadow DOM 场景（如 Web Components）：Layui 渲染的节点若进了 shadow root，外部样式默认无法穿透，必须用
::slotted()或part属性配合
