Layui进度条样式需用带前缀的选择器加!important覆盖，如.layui-upload-list .layui-progress-bar{background-color:#4ecdc4!important}；高度需同时设置外层min-height和内层height及align-self:stretch。
直接改 class 或内联 style 很容易失效，因为 Layui 的进度条在 JS 渲染时会动态写入内联样式，覆盖你写的 CSS。关键是要用带前缀的选择器 + !important 强制覆盖，同时注意容器与进度条本体两层高度的协同控制。
颜色修改：必须用 .layui-progress-bar 加前缀并加 !important
Layui 内部会根据主色变量重算 background-color，所以给 .layui-progress-bar 加 layui-bg-red 或写 style="background-color: #ff6b6b" 都不生效。
- 正确写法是定位到具体使用场景的父容器，比如上传组件里要加
.layui-upload-list前缀： .layui-upload-list .layui-progress-bar { background-color: #4ecdc4 !important; }- 如果是表格中渲染的进度条，可用
.layui-table .layui-progress-bar；通用场景可写.layui-progress .layui-progress-bar，但要确保权重足够 - 避免全局污染：不推荐直接写
.layui-progress-bar，否则会影响所有进度条
高度调整：要同时控制外层容器和内层进度条
只设 .layui-progress-bar { height: 8px } 常常没变化，是因为外层 .layui-progress 默认是 flex 布局且未设最小高度，导致子元素被压缩。
- 给外层加
min-height: 8px（或固定height: 8px） - 给内层加
height: 8px !important和align-self: stretch !important - 完整示例：
.layui-progress { min-height: 8px; }
.layui-progress-bar { height: 8px !important; align-self: stretch !important; }
其他实用细节
- 百分比文字默认不显示，加
lay-showPercent="yes"到.layui-progress容器上才可见 - 想隐藏百分比文字，加 CSS：
.layui-progress-text { display: none; } - 大号进度条用
layui-progress-big类，它自带更大字体和内嵌文字布局，无需额外调高度 - 颜色若需随数值动态切换（如 <30% 红、>70% 绿），建议预定义好 CSS 类（如
.progress-low、.progress-high），JS 中通过elem.classList.replace()切换，别直接操作style.background
