PrimeVue：复选框背景答案

【问题标题】：PrimeVue: Checkbox BackgroundPrimeVue：复选框背景
【发布时间】：2022-10-20 16:09:14
【问题描述】：

我想通过将当前默认背景样式覆盖为红色而不是白色背景来更改我当前的复选框背景颜色。这是我尝试过的当前模板和css。

我试图将primevue按钮默认蓝色按钮覆盖为红色，它工作正常，但primevue复选框并非如此。有人可以帮忙吗？

<template>
  <div>
    <h2>Test Checbox</h2>
    <div class="field-checkbox">
      <Checkbox id="test1" name="test" value="test1" v-model="test" />
      <label for="test1">Test Checkbox 1</label>
    </div>

    <div>
      <Button label="Select " icon="pi pi-check" iconPos="right" />
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "HelloWorld",
  setup() {
    const test = ref([]);

    return { test }
  }
});
</script>

<style scoped>
div {
  margin: 1rem 0;
}
 
.p-checkbox .p-checkbox-box  {
  background: red !important;
  color: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight {
  border-color: red !important;
  background: red !important;
}

.p-button {
  background: red;
}
</style>

【问题讨论】：

标签： css vue.js primevue

【解决方案1】：

我之前遇到过类似的问题。范围属性导致问题。另一种解决方案是，您可以向组件添加一个类，然后使用该类添加特定于该组件的样式。这是用于更改 PrimeVue 复选框组件颜色的 CSS。希望这对某人有帮助。

<style>
div {
  margin: 1rem 0;
}

.p-button {
  background: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  border-color: red !important;
}

.p-checkbox .p-checkbox-box.p-highlight,
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  background: red !important;
}

.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  box-shadow: 0 0 0 0.05rem rgb(253, 96, 96) !important;
}
</style>

【讨论】：

【解决方案2】：

因为您使用的是style scoped，所以您指定的规则特定于您在组件中定义的元素的范围——PrimeVue 元素并未在您的元素中定义。要访问 PrimeVue 元素，请使用 [deep][1] 选择器：

:deep( .p-checkbox ) {
   /* ... */
}

But as @Hirusha Cooray answers, if this re-style is not a one-off, do it once, globally, in the base style definitions for the project.

  [1]: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

【讨论】：