Lo que quiero:

Tengo un componente Button , que acepta una variant de prop. Quiero que el className del botón cambie en función de la propiedad que se le haya pasado.

El objetivo es evitar el uso de botones de declaraciones if/else , en lugar de usar un solo botón que cambia dinámicamente según la necesidad.

Cosas a tener en cuenta:

Estoy usando Tailwindcss como motor principal de estilo.

Solución ideal:

 // provide the variant to component: <Button variant="default" /> // would return: <button className={variantClasses.default} />

Componente del botón:

 interface Props { variant: string; innerText: string; } function Button({ variant, innerText }: Props) { // classes for all variants const variantClasses = { error: "...classes", default: "...classes", }; // if no variant provided, return an error variant. if (!variant) { return <button className={variantClasses.error}>Error</button>; } // else return the correct variant with matching styles. else { return ( <button className={`${variantClasses}.${variant}`}> {innerText || "Button"} </button> ); } } export default Button;

Lo que he probado:

Cambiar los valores de interpolación dentro del botón className .
Usando una matriz para variantClasses en lugar de un objeto.

about 4 years ago · Santiago Trujillo

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-08-26T20:23:08.804Z

Solución:

Tailwind no admite la interpolación a través de clases de la misma manera que otras soluciones css, por lo que se necesitaba una solución alternativa. Podemos hacer esto en su lugar:

Esto es lo que debe hacer

Defina una matriz de variantes, proporcionando atributos de name y className .
Busque en la matriz una entrada donde el name coincida con la variant proporcionada.
Si nada coincide, arroja un error... de lo contrario, crea una nueva variable que contenga clases coincidentes.
Proporcione una nueva variable a className prop en el componente de botón.

 interface Props { variant: string; innerText: string; } function Button({ variant, innerText }: Props) { const variantClasses = [ { name: "error", className: "...classes", }, { name: "filled", className: "...classes", }, ]; let activeClass = variantClasses.find((v) => v.name === variant); // if matching variant is not found, throw error variant if (!activeClass) { return <button className={variantClasses[0].className}>Error</button>; } // if variant found, return matching class else { return ( <button className={activeClass?.className}> {innerText || "Button"} </button> ); } } export default Button;

0

359

Cómo implementar un estilo de botón dinámico usando tailwindcss