<ButtonAtom></ButtonAtom>
estos son los componentes del botón que hice.
<template> <div> <button class="px-2 py-1" :class="[borderRadius, backgroundColor]"> <slot /> </button> <div> </template>y esta es la etiqueta html dentro de los componentes.
Si agrego css al <ButtonAtom> como <ButtonAtom color="white">
color se conecta a la etiqueta raíz que es <div>
el punto es si trato de conectar el css a <button> .
¿Hay alguna forma de conectarse a <button> sin eliminar el html raíz <div>
PD: esto es vue3.
Debes pasar un atributo de estilo con color:white como propiedad <ButtonAtom style="color:white"> luego, dentro del componente secundario, inheritAttrs:false y vincula esos $attrs al elemento del botón:
<template> <div> <button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]"> <slot /> </button> <div> </template> <script> export default { inheritAttrs: false } </script>Solo un ejemplo más corto, pero ¿ya has probado esto?
<button style="color: white"></button>puede pasar el color como accesorio al componente del botón y usarlo en el botón mismo
<template> <div> <button class="px-2 py-1" v-bind="$attrs" :class="[borderRadius, backgroundColor]"> <slot /> </button> <div> </template> <script> export default { props: { color: String, } } </script>y usarlo en el componente principal como
<ButtonAtom color="white">