nutui dialog组件样式在真机不生效

Question

浏览器上效果是这样的：

但是真机上是这样的：

我在页面的style文件中这样写

  >>>.nut-button--primary {
    background: #4F9DFF;
  }

  >>>.nut-dialog__footer-ok {
    max-width: 128px;
    background: #4F9DFF !important;
  }

  >>>.nut-dialog__footer-cancel.nut-button.nut-button--primary.nut-button--small.nut-button--round.nut-button--plain{
    border-top-color: #4F9DFF;
    border-bottom-color: #4F9DFF;
    border-right-color: #4F9DFF;
    border-left-color: #4F9DFF;
    color: #4F9DFF;

  }

也在全局样式文件中这样写，并引入：

// 改变nutui-uniapp主题
:root, page {
  --nut-primary-color: #4F9DFF;
  --nut-button-primary-background-color: #4F9DFF;
}

使用webview调试却发现没有作用上：
确认按钮

取消按钮

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

用户在使用 nutui-dialog 组件时，发现样式在真机上不生效，而在浏览器上显示正常。用户已经在页面的 style 文件和全局样式文件中定义了相关样式，但真机上仍然没有生效。

关键点

1. 样式不生效：在真机上样式没有生效，但在浏览器上正常。
2. 样式定义：用户已经在页面的 style 文件和全局样式文件中定义了相关样式。
3. 调试工具：用户使用 webview 调试工具进行调试。

解决方案

1. 检查样式穿透

用户在样式定义中使用了 >>> 符号进行样式穿透，这在某些情况下可能不被支持。可以尝试使用 ::v-deep 或 /deep/ 进行替换。

::v-deep .nut-button--primary {
  background: #4F9DFF;
}

::v-deep .nut-dialog__footer-ok {
  max-width: 128px;
  background: #4F9DFF !important;
}

::v-deep .nut-dialog__footer-cancel.nut-button.nut-button--primary.nut-button--small.nut-button--round.nut-button--plain {
  border-top-color: #4F9DFF;
  border-bottom-color: #4F9DFF;
  border-right-color: #4F9DFF;
  border-left-color: #4F9DFF;
  color: #4F9DFF;
}

2. 检查全局样式引入

确保全局样式文件正确引入，并且在项目中生效。可以在 App.vue 或 main.js 中引入全局样式文件。

// main.js
import './path/to/your/global.scss';

3. 检查真机环境

不同的真机环境可能对样式的支持有所不同，可以尝试在不同的真机上进行测试，看是否存在兼容性问题。

4. 使用 uni-app 提供的样式穿透方式

uni-app 提供了特定的样式穿透方式，可以尝试使用 ::v-deep 或 /deep/ 进行替换。

::v-deep .nut-button--primary {
  background: #4F9DFF;
}

::v-deep .nut-dialog__footer-ok {
  max-width: 128px;
  background: #4F9DFF !important;
}

::v-deep .nut-dialog__footer-cancel.nut-button.nut-button--primary.nut-button--small.nut-button--round.nut-button--plain {
  border-top-color: #4F9DFF;
  border-bottom-color: #4F9DFF;
  border-right-color: #4F9DFF;
  border-left-color: #4F9DFF;
  color: #4F9DFF;
}

5. 调试工具

使用 webview 调试工具进行调试时，确保调试工具的版本是最新的，并且正确配置。

总结

通过以上步骤，可以尝试解决 nutui-dialog 组件样式在真机上不生效的问题。首先检查样式穿透方式是否正确，然后确保全局样式文件正确引入，最后在不同的真机上进行测试，看是否存在兼容性问题。如果问题依然存在，可以考虑使用 uni-app 提供的样式穿透方式进行替换。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑