Website-Suche

javascript - Wie kann ich CSS auf das Kind-Tag von einer Komponente anwenden

<ButtonAtom></ButtonAtom>

Dies ist die Schaltflächenkomponente, die ich gemacht habe.

<template>
 <div>
  <button class="px-2 py-1" :class="[borderRadius, backgroundColor]">
    <slot />
  </button>
 <div>
</template>

und dies ist das HTML-Tag innerhalb der Komponenten.

Wenn ich CSS zu dem <ButtonAtom> hinzufüge wie <ButtonAtom color="white">

Farbe verbindet sich mit dem Root-Tag, der <div> ist

Der Punkt ist, wenn ich versuche, das CSS mit <button> zu verbinden.

Gibt es Möglichkeiten, sich mit <button> zu verbinden, ohne das Root-HTML <div> zu löschen?

P.S. das ist vue3.

Antwort #1

Sie sollten ein style-Attribut mit color:white als Eigenschaft übergeben <ButtonAtom style="color:white">, dann fügen Sie in der untergeordneten Komponente inheritAttrs:false hinzu und binden dieses $attrs an das Button-Element:

<template>
 <div>
  <button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]">
    <slot />
  </button>
 <div>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

Antwort #2

Nur ein kürzeres Beispiel, aber hast du das schon versucht:

<button style="color: white"></button>

Verwandte Artikel