Question

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

有经验吗？

Answer 1

您可以扩展样式，保持组件的原始样式不受引导程序的影响。您将找到有关使用第三方库的更多文档，例如react bootstrap with styled-components here。

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

Answer 2

我想提供一个替代方案。

我以前一直在使用react-bootstrap，我们发现当前的实现并未将Bootstrap完全移植到react中，我们仍然需要依赖外部文件（例如CSS / Fonts），这不是样式组件的哲学和最佳实践。

考虑到样式化组件提供了css接口，我们在名为bootstrap-styled的项目中再次移植了bootstrap 4。

此v4引导程序实现完全在样式化组件中实现，而没有CSS或额外文件。

从完整的js API开始，这将带来许多好处，包括主题，模块化和可重用性。

要覆盖样式，可以通过ThemeProvider或在any component上使用props.theme来完成。

您可以看到一个demo here

样式组件和反应引导程序？

2 个答案: