Стили-компоненты и реакционная бутстрап?

Есть ли способ использовать стилизованные компоненты вместе с реакцией-бутстрапом? bsClass -bootstrap предоставляет свойства bsClass вместо className для своего компонента, который, по-видимому, несовместим со стилизованными компонентами.

Любой опыт?

Ответ 1

Вы можете расширить стиль, сохраняя исходные стили компонента из бутстрапа. Вы найдете более подробную документацию по использованию библиотек сторонних производителей, как реагировать самозагрузки с стилизованной-компонентой здесь.

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

Ответ 2

Я хотел бы предложить альтернативу.

Раньше я использовал response-bootstrap, и мы обнаружили, что текущая реализация не портирует bootstrap полностью на реакцию, и нам все еще нужно полагаться на внешние файлы, такие как CSS/Fonts, что не является философией styled-components и передовым опытом.

Учитывая, что styled-компоненты предлагают интерфейс css, мы снова портировали bootstrap 4 в проект под названием bootstrap-styleled.

Эта реализация загрузчика v4 полностью реализована в styleled-компонентах без CSS или дополнительных файлов.

Это дает несколько преимуществ, начиная с полного js api, тематики, модульности и возможности повторного использования.

Чтобы переопределить стили, это можно сделать через ThemeProvider или используя props.theme для любого компонента.

Вы можете увидеть демо здесь