如何更改 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>

  <template v-slot:label>

    <span id="checkboxLabel">Label Content</span>

  </template>

</v-checkbox>

<style>

#checkboxLabel {

   color: blue;

   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

  v-model="theModel"

  color="white"

  label="This text will soon be white"

/>

使用 SCSS，样式看起来像这样

使用:deep覆盖 vuetify 样式，允许你创建你想要的外观

.v-input--checkbox::v-deep {

  .v-label, .v-icon {

    color: white;

    font-size: 22px;

  }

}