Estoy usando bootstrap + react-bootstrap, y realmente no entiendo por qué mi tema personalizado no se aplica en los elementos del formulario.
La tematización se aplica correctamente a mi botón que tiene estilo btn-primary, ¿y asumí que sería lo mismo en otros elementos de arranque?
Aquí puede ver que los elementos aún tienen el estilo de arranque predeterminado en comparación con el botón: https://imgur.com/a/0kJZdjt
Mi index.scss (base de aplicaciones generada con la aplicación create-react): 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 este olvidando? ¿Tengo que agregar clases a los elementos del formulario? he buscado pero no encuentro nada
Bueno, resulta que no es tan fácil como configurar la variable theme-colors .
Tuve que configurar otras variables también, como esta
$theme-colors: ( "primary": #86CB92, "secondary": #8f0000, "success": #71B48D, "info": #251F47, "warning": #251F47, "danger": #E87461, "light": #D8B4E2, "dark": #000000 ); $primary: map-get($theme-colors, primary); $input-focus-border-color: $primary; @import "~bootstrap/scss/bootstrap";Y ahora el elemento de formulario tiene los estilos correctos.