layer.open 的 CSS 前缀无法动态修改，所有类名硬编码为“layui-”开头，不支持运行时配置；官方唯一支持的样式隔离方式是通过 skin 参数添加自定义 class 并用作用域选择器限定样式。
layer.open 的 CSS 前缀不能动态修改
你无法在调用 layer.open() 时通过参数改掉 layui- 这个默认样式前缀。layui 的所有 dom 节点类名（如 .layui-layer、.layui-layer-title、.layui-layer-btn0）都是硬编码生成的，不支持运行时配置前缀。
这是设计决定，不是 bug —— Layui 没提供类似 prefix: 'my-' 这样的选项，源码里所有 class 字符串都写死为 "layui-" + xxx 形式。
- 试图在 JS 中 monkey patch
layer对象的内部方法，风险极高：后续版本升级极易失效，且可能破坏 layer 自身的 DOM 查找逻辑（比如layer.close(index)依赖固定类名定位） - 用
document.body.innerHTML.replace(/layui-/g, 'my-')这类暴力替换会污染整个页面，影响其他未关闭的 layer 实例甚至非 layer 的 layui 组件（如layui-form） - 如果你真需要隔离样式，正确路径是 CSS 层面隔离，而非改前缀
用 CSS 选择器限定作用域，比改前缀更可靠
真正可控、可维护的做法，是用更具体的选择器把自定义样式“锁”在特定弹层内，避免全局污染。
例如你想只改某类弹窗的按钮颜色，不要写：
.layui-layer-btn0 { background: #e74c3c; }
而应该写：
.layui-layer-my-dialog .layui-layer-btn0 { background: #e74c3c !important; }
然后在 layer.open() 中显式传入 skin：
layer.open({
skin: 'layui-layer-my-dialog',
title: '操作确认',
content: '...',
btn: ['确定', '取消']
});
-
skin参数值会作为 class 加到最外层.layui-layer节点上，它是唯一官方支持的 DOM 标识入口 - 所有子元素（
.layui-layer-title、.layui-layer-content、.layui-layer-btn）都会被这个父级 class 包裹，天然形成作用域 - 不用
!important也行，但必须确保你的选择器权重 ≥ layer 内联样式（它常用style="color:#333"这种高优先级写法）
为什么别碰源码或构建流程改前缀
有人尝试下载 Layui 源码，把所有 layui- 替换为 my- 再重新编译，结果发现：
- 部分模块（如
form、table）内部也依赖layui-前缀做 DOM 查询或事件委托，改完后功能异常 - layer 的动画、拖拽、居中逻辑大量使用
getElementsByClassName('layui-layer-xxx')，手动改会漏掉隐藏调用 - CDN 引入的
layui.all.js是压缩合并版，反解成本高，且每次升级都要重复操作 - 官方主题包（如
layui-theme-red.css）也基于layui-前缀编写，改前缀等于放弃整套主题能力
复杂点在于 layer 动态插入 body 的时机
layer 的 DOM 是运行时 append 到 document.body 最末尾的，这意味着：
- 你在
里写的 CSS 必须能命中未来才存在的节点，所以不能依赖:has()或其它新特性（兼容性差） - 如果用 JS 动态注入样式表（比如换肤场景），要等
layer.open()完成后再注入，否则第一次打开时样式未生效 -
success回调里操作 DOM 是安全的，但仅适合单次、轻量样式调整（比如改某个按钮文字色），不适合整套皮肤
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
