uni-app怎样修改uni-ui自带的样式

对于uni-ui中的组件，同样可以通过修改它们的样式来自定义它们的外观。由于uni-ui是基于uni-app开发的，因此可以使用和uni-app中相同的样式修改方法来修改uni-ui中组件的样式。

以下是修改uni-ui组件样式的步骤：

1. 安装uni-ui插件并引入需要修改的组件，例如需要修改uni-icons组件的样式，则需要在页面或组件中引入uni-icons组件。

<template>
  <view>
    <uni-icons type="success"></uni-icons>
  </view>
</template>

<script>
  import uniIcons from '@/uni-ui/components/uni-icons/uni-icons.vue'
  export default {
    components: {
      uniIcons
    }
  }
</script>

2. 在组件或页面的style标签中定义要修改的样式，覆盖uni-icons组件自带的样式。

<template>
  <view>
    <uni-icons type="success"></uni-icons>
  </view>
</template>

<script>
  import uniIcons from '@/uni-ui/components/uni-icons/uni-icons.vue'
  export default {
    components: {
      uniIcons
    }
  }
</script>

<style>
  /* 修改uni-icons组件的颜色 */
  .uni-icons {
    color: red;
  }
</style>

3. 重新编译运行项目，即可看到修改后的效果。

需要注意的是，修改uni-ui组件的样式时，需要注意不要修改uni-ui组件的class名称，否则可能会影响到其他组件的样式。如果需要修改class名称，可以使用scoped属性来解决，例如：

<template>
  <view>
    <uni-icons type="success" class="my-icons"></uni-icons>
  </view>
</template>

<script>
  import uniIcons from '@/uni-ui/components/uni-icons/uni-icons.vue'
  export default {
    components: {
      uniIcons
    }
  }
</script>

<style scoped>
  /* 修改uni-icons组件的颜色 */
  .my-icons {
    color: red;
  }
</style>

这样就可以在当前组件中使用.my-icons类来修改uni-icons组件的样式。