uni-app新版本升级后 button设置style样式border:0无效

在 Uni-app 新版本中，如果你发现为 button 设置 style 样式 border: 0 无效，可能是由于以下几个原因：

1. 原生组件的限制

Uni-app 的 button 组件在某些平台（如微信小程序）下是原生组件，原生组件的样式可能会受到平台的限制，无法完全自定义。border: 0 可能被平台默认样式覆盖。

解决方案：

• 使用 button 的 plain 属性，设置为 true，可以减少默认样式的影响。
• 使用 button 的 style 或 class 属性，尝试设置 border: none !important; 来强制覆盖样式。

<button plain="true" style="border: none !important;">按钮</button>

2. 平台差异

不同平台对 button 组件的默认样式处理不同，某些平台可能不支持 border: 0 或者需要特定方式来处理。

解决方案：

• 使用条件编译，针对不同平台设置不同的样式或使用不同的组件。

<template>
  <button :style="buttonStyle">按钮</button>
</template>

<script>
export default {
  computed: {
    buttonStyle() {
      #ifdef MP-WEIXIN
      return { border: 'none' };
      #else
      return { border: '0' };
      #endif
    }
  }
}
</script>

3. 样式优先级问题

如果你在全局样式或父组件中设置了 button 的样式，可能会导致 border: 0 被覆盖。

解决方案：

• 使用 !important 提高样式的优先级。
• 使用 scoped 样式或在 style 标签中直接设置 button 的样式。

<style scoped>
button {
  border: none !important;
}
</style>

4. 使用自定义组件

如果 button 的样式无法满足需求，可以考虑使用 view 或 div 自定义按钮样式，并通过事件处理模拟按钮点击。

<view class="custom-button" [@click](/user/click)="handleClick">自定义按钮</view>

<style>
.custom-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  border: none;
}
</style>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
}
</script>