如何更改 vuetify 复选框标签样式？

Question

你可以添加状态

  const [selectedId, setSelectedId] = useState(null);

然后制作一个函数来呈现在这种情况下的指南

const renderGuide = ({ item, index }) => {

    console.log(item)

    const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";

    return (

      <Guide

        item={item}

        index={index}

        onPress={() => setSelectedId(item.id)}

        style={{ backgroundColor }}

      />

    );

  };

这样你就可以访问由 id 选择的项目

Answer 1

我不确定这是否是正确的方法。但是通过 Vuetify，您还可以使用插槽。通过这种方式，您可以使用添加标签并根据需要设置样式。<v-checkbox>&nbsp; <template v-slot:label>&nbsp; &nbsp; <span id="checkboxLabel">Label Content</span>&nbsp; </template></v-checkbox><style>#checkboxLabel {&nbsp; &nbsp;color: blue;&nbsp; &nbsp;font-size: 16px;}</style>让我知道是否还有其他事情！

Answer 2

要想用好vue，就得用好slot。它使您更有效率。<div id="app">  <v-app id="inspire">    <v-container fluid>      <v-checkbox v-model="checkbox">        <template v-slot:label>          <div>            I agree that            <v-tooltip bottom>              <template v-slot:activator="{ on }">                <a                  target="_blank"                  href="http://vuetifyjs.com"                  @click.stop                  v-on="on"                >                  Vuetify                </a>              </template>              Opens in new window            </v-tooltip>            is awesome          </div>        </template>      </v-checkbox>    </v-container>  </v-app></div><script>new Vue({  el: '#app',  vuetify: new Vuetify(),  data () {    return {      checkbox: false,    }  },})</script>

Answer 3

Vuetify 对 CSS 具有非常高的特异性，但使用::deep.在这里，我将复选框和标签文本的颜色和字体大小设置为相同。这种颜色样式只会影响未选中的复选框。为了也为选中的复选框（包括状态之间的动画）获得白色，您也应该color="white"添加。v-checkbox在模板中添加复选框在这里，color="white"控制选中的复选框的颜色，而不是未选中的。<v-checkbox&nbsp; v-model="theModel"&nbsp; color="white"&nbsp; label="This text will soon be white"/>使用 SCSS，样式看起来像这样使用:deep覆盖 vuetify 样式，允许你创建你想要的外观.v-input--checkbox::v-deep {&nbsp; .v-label, .v-icon {&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-size: 22px;&nbsp; }}