我希望通过将当前默认背景样式重写为红色而不是白色背景来更改当前复选框背景颜色。下面是我尝试过的当前模板和css。

我试图将primevue按钮默认的蓝色按钮改写为红色，它工作得很好，但是primevue复选框的情况并非如此。有人能帮忙吗？

​

​

<template>
    <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>
      <Button label="Select " icon="pi pi-check" iconPos="right" />
</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>

​

​