Есть ли способ использовать стилизованные компоненты вместе с реакцией-бутстрапом? bsClass -bootstrap предоставляет свойства bsClass вместо className для своего компонента, который, по-видимому, несовместим со стилизованными компонентами.
Любой опыт?
Вы можете расширить стиль, сохраняя исходные стили компонента из бутстрапа. Вы найдете более подробную документацию по использованию библиотек сторонних производителей, как реагировать самозагрузки с стилизованной-компонентой здесь.
const StyledButton = styled(Button)'
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
';
Вот песочница для справки: https://codesandbox.io/s/2vpm40qk90
Я хотел бы предложить альтернативу.
Раньше я использовал response-bootstrap, и мы обнаружили, что текущая реализация не портирует bootstrap полностью на реакцию, и нам все еще нужно полагаться на внешние файлы, такие как CSS/Fonts, что не является философией styled-components и передовым опытом.
Учитывая, что styled-компоненты предлагают интерфейс css, мы снова портировали bootstrap 4 в проект под названием bootstrap-styleled.
Эта реализация загрузчика v4 полностью реализована в styleled-компонентах без CSS или дополнительных файлов.
Это дает несколько преимуществ, начиная с полного js api, тематики, модульности и возможности повторного использования.
Чтобы переопределить стили, это можно сделать через ThemeProvider или используя props.theme для любого компонента.
Вы можете увидеть демо здесь