53

有没有办法将styled-components与react-bootstrap一起使用？react-bootstrap 公开bsClass属性而不是className其组件，这似乎与样式化组件不兼容。

有什么经验吗？

4

2 回答 2

74

您可以扩展样式以保持组件的原始样式从引导程序。您将在此处找到更多关于使用第三方库（如 react bootstrap with styled-components）的文档。

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

于 2017-08-26T13:35:10.847 回答
23

我想提供一个更好的选择和方法。

我之前一直在使用 react-bootstrap，我们发现当前的实现并没有将 bootstrap 完全移植到 react 中，我们仍然需要依赖外部文件，例如 CSS/Fonts，这不是样式化组件的理念和最佳实践。

考虑到 styled-components 提供 css 接口，我们在一个名为bootstrap-styled的项目中移植了具有最佳 ES6 实践的 bootstrap 4 。

这个 Bootstrap 的 Twitter Bootstrap v4实现完全针对样式化组件实现，无需 CSS 或额外文件。

从完整的 js api、主题、模块化和可重用性开始，这带来了几个好处。

要覆盖样式，可以通过<ThemeProvider />或使用props.theme任何组件来完成。我们还导出了一个<BootstrapProvider />组件，该组件在其范围内包含<ThemeProvider />并提供引导类实用程序，例如.d-none，等等。

你可以在这里看到一个演示

于 2019-04-10T02:59:27.093 回答