Styled-components和react-bootstrap？

Question

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

有任何经验吗？

- jpfollenius

Answer 1

您可以使用styled-components扩展来自Bootstrap组件的原始样式。您可以在此处找到有关如何使用第三方库（如react bootstrap）与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

- Agney

---

这是正确的方法！另外一点，这适用于任何接受传递“className”属性的第三方或外部组件。 - mxstbr

如果您想为这些组件的子元素设置样式，可以像这样操作... styled(Carousel)\ border: 2px solid red; & .carousel-control { background-image: none; } `;` - Dylan Maxey

我可能错了，但我认为此答案中边框的语法不正确。在使用 styled components 时，您必须自定义 BORDER 的每个特征。同样适用于任何可以接受多个输入自定义的 CSS 属性。- 再次声明，我可能错了。 - Goku

@Goku，你能详细说明一下“边框的每个特征”是什么意思吗？任何有效的CSS都可以在样式化组件中使用。 - Agney

@Agney。我会尽力的，朋友。所以，我不确定这样写是否在语法上被接受：const StyledButton = styled(Button) ... border: 2px solid palevioletred; ...;相反，我认为应该像这样写才能被当前编译器识别：const StyledButton = styled(Button) ... border-width: 2px; border-color: palevioletred; ...;这只适用于styled-components。对于常规CSS，它肯定有效。 - Goku

Answer 2

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

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

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

这个Twitter Bootstrap v4的实现已经完全针对styled-components进行了实现，没有任何CSS或额外的文件。

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

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

你可以在这里看到演示。

- Dimitri Kopriwa

---

我正在尝试弄清楚如何将react-bootstrap结合起来使用。它很酷，但一旦你厌倦了保持bootstrap样式的最新状态，它就会变得过时吗？ - Capuchin

你不需要使用react-bootstrap，因为它已经是最新的版本。我们通过社区的帮助来更新它，每个人都可以做出贡献。Bootstrap Styled中没有已知的错误，Bootstrap 4也没有已知的更改，所以除了升级react和styled版本之外，没有理由改变源代码。我们仍在积极地贡献，并且经常有贡献者使用PR扩展功能。 - Dimitri Kopriwa

我们能否使用这个来扩展Bootstrap的样式？ - Casey

你是什么意思，@Casey？你有使用案例吗？Bootstrap-styled、styled和css没有限制。所有的mixin都是开源的，因此可以直接使用并扩展js api。对于所有的css，它使用主题变量，你可以随心所欲地使用。任何组件都可以用默认值或更多的css进行包装。 - Dimitri Kopriwa

@DimitriKopriwa 我在考虑创建一个styled-component，目前我使用className="text-center"属性，但我想将其更改为在styled component定义中包含它。类似于 styled(text-center) font-color: #abc123;` - Casey