¿Hay alguna manera de usar componentes con estilo junto con react-bootstrap ? react-bootstrap expone las propiedades de bsClass en lugar de className para su componente, que parece ser incompatible con los componentes con estilo.
¿Alguna experiencia?
Puede extender el estilo manteniendo los estilos originales del componente desde el arranque. Encontrará más documentación sobre el uso de bibliotecas de terceros como react bootstrap con componentes con estilo aquí .
const StyledButton = styled(Button)` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `;Aquí hay un sandbox como referencia: https://codesandbox.io/s/2vpm40qk90
Me gustaría ofrecer una mejor alternativa y enfoque.
He estado usando react-bootstrap antes y descubrimos que la implementación actual no estaba transfiriendo bootstrap a react por completo y aún necesitábamos confiar en archivos externos como CSS/Fonts, que no es la filosofía y las mejores prácticas de los componentes con estilo.
Teniendo en cuenta que los componentes con estilo ofrecen la interfaz css, adaptamos bootstrap 4 con las mejores prácticas de ES6 en un proyecto llamado bootstrap-styled .
Esta implementación de bootstrap de Twitter Bootstrap v4 está completamente implementada para componentes con estilo sin una sola vez de CSS o archivos adicionales.
Esto brinda varios beneficios, comenzando con una API js completa, temas, modularidad y reutilización.
Para anular estilos, se puede hacer a través de <ThemeProvider /> o usando props.theme encualquier componente . También exportamos un componente <BootstrapProvider /> que incluye <ThemeProvider /> y proporciona utilidades de clase de arranque como .d-none , etc... en su alcance.
Puedes ver una demostración aquí