如何自定义uniapp组件样式

在 UniApp 中自定义组件样式，可以通过以下几种方式实现：

1. 内联样式： 你可以在组件的模板中直接使用 style 属性来添加内联样式。

   <template>
     <view class="custom-style">这是一个自定义样式的组件</view>
   </template>
   
   <script>
   export default {
     // 组件的脚本部分
   }
   </script>
   

2. 局部样式： 在组件的 <style> 标签中定义样式，这些样式只会应用到当前组件。

   <template>
     <view class="custom-style">这是一个自定义样式的组件</view>
   </template>
   
   <script>
   export default {
     // 组件的脚本部分
   }
   </script>
   
   <style>
   .custom-style {
     color: red;
     font-size: 16px;
   }
   </style>
   

3. 全局样式： 在 App.vue 或者单独的 CSS 文件中定义全局样式，这些样式会应用到所有页面和组件。

   /* App.vue 或者单独的 CSS 文件 */
   .global-custom-style {
     background-color: #f0f0f0;
   }
   

   然后在组件中使用这个类：

   <template>
     <view class="global-custom-style">这是一个全局样式的组件</view>
   </template>
   

4. CSS Modules： UniApp 支持 CSS Modules，可以通过这种方式来避免样式冲突。

   首先，在组件目录下创建一个 .module.css 文件，例如 CustomComponent.module.css：

   /* CustomComponent.module.css */
   .customStyle {
     color: blue;
     font-size: 18px;
   }
   

   然后在组件中引入并使用这个模块：

   <template>
     <view :class="$style.customStyle">这是一个使用 CSS Modules 的组件</view>
   </template>
   
   <script>
   import styles from './CustomComponent.module.css';
   
   export default {
     // 组件的脚本部分
   }
   </script>
   

5. Scoped CSS： 在组件的 <style> 标签中添加 scoped 属性，这样定义的样式只会应用到当前组件。

   <template>
     <view class="scoped-style">这是一个使用 Scoped CSS 的组件</view>
   </template>
   
   <script>
   export default {
     // 组件的脚本部分
   }
   </script>
   
   <style scoped>
   .scoped-style {
     background-color: yellow;
   }
   </style>
   

通过以上几种方式，你可以灵活地自定义 UniApp 组件的样式。选择哪种方式取决于你的具体需求和项目结构。