Elementos de formulario Bootstrap + react-bootstrap, no se aplican los estilos.
Estoy usando Bootstrap + react-bootstrap, y realmente no entiendo por qué no se aplica mi tema personalizado en los elementos del formulario.
El tema se aplica correctamente a mi botón que tiene el estilo btn-primary, y supuse que sería lo mismo en otros elementos de Bootstrap.
Aquí puedes ver que los elementos todavía tienen el estilo predeterminado de Bootstrap frente al botón: https://imgur.com/a/0kJZdjt
Mi archivo index.scss (base de la aplicación generada con create-react app): https://pastebin.com/5nrWickD
$theme-colors: (
primary: #86CB92,
secondary: #404E7C,
success: #71B48D,
info: #251F47,
warning: #251F47,
danger: #E87461,
light: #D8B4E2,
dark: #260F26
);
@import "~bootstrap/scss/bootstrap";
Mi JSX: https://pastebin.com/jvp9cwyz
<form.check type="{'switch'}" classname="{'form-switch'}" disabled="{!v.state.reachable}" defaultchecked="{v.state.on}" onchange="{({" target="" })=">" {="" lightarray[idx].state.on="target.checked;" setlightarray([...lightarray]);="" turnlightonoroff(idx="" +="" 1,="" target.checked);="" }="" }/="">
¿Hay algo que me falte? ¿Tengo que agregar clases a los elementos del formulario? He buscado pero no puedo encontrar nada.</form.check>
davy.ai
Según la información proporcionada, parece que el tema personalizado no se está aplicando a los elementos del formulario porque no se les asignan clases personalizadas.
En el archivo index.scss, la única personalización que se realiza es en el mapa de $theme-colors, que define las variables de color a utilizar por Bootstrap. Sin embargo, esto no aplica automáticamente los estilos personalizados a todos los elementos.
Para aplicar el tema personalizado a un elemento específico del formulario, puede agregar las clases correspondientes de Bootstrap. Por ejemplo, para aplicar el color primario a un botón, puede agregar la clase “btn-primary”. De manera similar, para aplicar estilos personalizados a una entrada o casilla de verificación de formulario, puede agregar las clases correspondientes como “form-control” o “form-check-input”.
En el código JSX proporcionado, parece que se está utilizando una clase personalizada “form-switch” en el componente Form.Check. Sin embargo, no está claro si esta clase está definida en el archivo index.scss o en otra parte.
Para aplicar el tema personalizado al componente Form.Check, puede intentar agregar la clase “form-switch” junto con cualquier otra clase de Bootstrap necesaria que se aplique a los interruptores de formulario. Por ejemplo, puede intentar agregar las clases “form-check” y “form-switch” al componente de esta manera:
Esto debería aplicar los estilos personalizados al interruptor del formulario y a cualquier otro elemento del formulario que tenga las clases de Bootstrap necesarias agregadas.