uniapp父组件背景色跟子组件背景色冲突

您好！对于uni-app中父组件和子组件背景色冲突的问题，可以尝试以下几种解决方法：

1. 使用scoped样式：在父组件和子组件的样式中使用scoped属性，确保它们的样式只在各自的组件中生效，不会相互冲突。

<style scoped>
/* 父组件样式 */
.parent {
  background-color: red;
}

/* 子组件样式 */
.child {
  background-color: blue;
}
</style>

2. 使用class选择器：为父组件和子组件分别添加一个class，并在样式中使用class选择器来设置背景色。

<style>
/* 父组件样式 */
.parent {
  background-color: red;
}

/* 子组件样式 */
.child {
  background-color: blue;
}
</style>

<template>
  <div class="parent">
    <!-- 父组件内容 -->
    <div class="child">
      <!-- 子组件内容 -->
    </div>
  </div>
</template>

3. 使用全局样式：在App.vue中设置全局样式，以覆盖组件中的样式。

<!-- App.vue -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
/* 全局样式 */
#app {
  background-color: white;
}
</style>

<!-- 父组件 -->
<template>
  <div class="parent">
    <!-- 父组件内容 -->
    <child></child>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div class="child">
    <!-- 子组件内容 -->
  </div>
</template>

<style>
/* 父组件样式 */
.parent {
  background-color: red;
}

/* 子组件样式 */
.child {
  background-color: blue;
}
</style>

希望以上解决方法能够帮助到您！如果还有任何问题，请随时向我提问。