uni-app nvue中设置nvueStyleCompiler后，导致button样式不能自定义

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app nvue中设置nvueStyleCompiler后，导致button样式不能自定义

问题说明

nvue页面，在manifest中的app-plus下设置了 nvueStyleCompiler : uni-app模式后，导致自定义button样式不生效

复现步骤

  1. 新建一个nvue项目，进入nvue页面，添加如下代码：
<template>  
    <view style="padding: 20px;">  
        <button type="primary" class="eBtn" size="mini">搜索</button>  
    </view>  
</template>  

<style>  
.eBtn{background-color: #FF6600 !important; border-color: #FF6600 !important;}  
</style>
  1. 进入manifest.json配置如下：
{          
    "app-plus":  {    
        "nvueStyleCompiler": "uni-app"    
    }    
}
  1. 运行到手机模拟器，发现自定义样式没有生效

未设置nvueStyleCompiler前的理想效果

未设置nvueStyleCompiler前的理想效果

设置nvueStyleCompiler后的非理想效果

设置nvueStyleCompiler后的非理想效果

经测试，就算将样式写在button上的style属性中，也很难覆盖原本的样式，按道理，设置了nvueStyleCompiler为uni-app的前后效果应该保持一致，允许用户自定义样式，请官方重视！！！


Harmonyos Next教程
24 回复

HBuilderX alpha 3.2.11 已修复


也没用

你用的是HBuilderX什么版本，不同版本，是否存在差异？

使用的是HBuilderX 3.1.9，属于最新版本

HBuilderX 3.1.8版本也是如此，如果不设置nvueStyleCompiler，又会导致官方<uni-data-checkbox>在nvue中用不了，设置了，自定义按钮的样式又设置不了，真是很尴尬！望确认！！！

回复 九涯: 收到，后续优化，已加分，感谢您的反馈！

回复 DCloud_UNI_Anne: 好的好的，不客气，因为忙，我没有测试过其它官方组件，是否也因设置nvueStyleCompiler不能自定义，理论上既然button有此问题，其它组件也有，所以希望早点修复！

请问已经修复了吗

貌似还没修复吧，现在自定义按钮的样式还是没效果

这么久了还没修复吗

更新试下

回复 DCloud_UNI_GSQ: 3.2.12 也没效果

回复 8***@qq.com: 那详细说明一下你遇到的情况

没有修复，button样式color不起作用

详细说明一下

回复 DCloud_UNI_GSQ: nvue下background-color在<button>下不能生效，把组件改为<text>样式可以生效。

回复 feelovejun: 调整 nvueStyleCompiler 配置是否有改善？

2022年了，3.3.5问题依然存在

详细描述一下

回复 DCloud_UNI_GSQ: hx:3.6.3 nvue 修改button的border-color 默认黑边样式，无法生效，这个问题依然存在

回复 小小白啊: 也是修改nvueStyleCompiler配置后出现的吗？

回复 DCloud_UNI_GSQ: 是的，nvueStyleCompiler：“uni-app"

回复 小小白啊: 改回nvueStyleCompiler：“weex"就没有这个问题吗？

在uni-app中使用nvue进行开发时，nvueStyleCompiler 是一个用于编译 nvue 文件中 CSS 样式的选项。当设置了这个选项后，你可能会遇到 button 样式不能自定义的问题。这通常是因为 nvue 的样式编译机制与 vue 文件有所不同，尤其是在处理内联样式和类选择器时。

以下是一个简单的示例，展示如何在 nvue 中自定义 button 的样式，同时考虑到 nvueStyleCompiler 的影响。

首先，确保你的 manifest.json 文件中已经配置了 nvueStyleCompiler：

{
  "mp-weixin": { // 或者其他平台配置
    "appid": "your-app-id",
    "setting": {
      "nvueStyleCompiler": "weex" // 或者其他编译器选项
    }
  }
}

然后，在你的 nvue 文件中，你可以通过以下方式自定义 button 的样式：

<template>
  <div>
    <button class="custom-button">Custom Button</button>
  </div>
</template>

<style scoped>
.custom-button {
  width: 200px;
  height: 50px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 5px; /* 圆角 */
  text-align: center; /* 文字居中 */
  text-decoration: none; /* 无下划线 */
  display: inline-block; /* 行内块元素 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}
</style>

<script>
export default {
  data() {
    return {
      // 你的数据
    };
  },
  methods: {
    // 你的方法
  }
};
</script>

在上面的示例中，我们使用了类选择器 .custom-button 来定义 button 的样式。这种方式通常不会受到 nvueStyleCompiler 的影响，因为类选择器是 CSS 的标准特性，且被所有主流的 CSS 编译器支持。

如果你发现即使使用了类选择器也无法自定义样式，可能是由于其他 CSS 规则（如全局样式）的覆盖。在这种情况下，你可以尝试使用更具体的选择器，或者增加 CSS 规则的优先级（例如，使用 !important 标记）。

此外，确保你的 nvue 文件中的 <style> 标签使用了 scoped 属性，这样可以确保样式只作用于当前组件，避免全局污染。如果问题依旧存在，请检查你的编译配置和样式文件是否有其他潜在的冲突。

回到顶部