样式化组件和反应引导？

Posted 2023-03-15

【中文标题】样式化组件和反应引导？

【英文标题】：Styled-components and react-bootstrap?

【发布时间】：2018-02-04 07:57:09

【问题描述】：

有没有办法同时使用styled-components 和react-bootstrap？ react-bootstrap 为其组件公开bsClassproperties 而不是className，这似乎与样式化组件不兼容。

有什么经验吗？

【参考方案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

【讨论】：

这是正确的方法！作为旁注，这将适用于任何接受 className 属性传入的第三方或外部组件。

如果您想为这些组件之一的子组件设置样式，您可以这样做...styled(Carousel)` border: 2px solid red; & .carousel-control background-image: none; `;

我可能弄错了，但我认为此答案中边框的语法不正确。使用样式组件时，您必须自定义 BORDER 的每个功能。任何可以接受多个输入自定义的 css 属性也是如此。 - 再说一次，我可能弄错了。

@Goku 你能详细说明each feature of border 的意思吗？任何有效的 CSS 在样式组件内都是有效的

@Agney。我会尽力的，朋友。所以。我不确定在语法上是否可以这样写： const StyledButton = styled(Button) ` ... border: 2px solid pavioletred; ...; Instead, I think it's suppose to be written like this to be recognized by current compiler: const StyledButton = styled(Button) ...边框宽度：2px；边框颜色：淡紫色； ...`;这仅与样式组件有关。对于常规 CSS，它确实有效。

【参考方案2】：

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

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

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

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

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

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

你可以看到demo here

【讨论】：

我也在试图弄清楚如何结合 react-bootstrap。这很酷，但是一旦你厌倦了让 bootstrap 样式保持最新，它就会被弃用..？

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

我们可以使用这个扩展引导样式吗？

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

@DimitriKopriwa 我正在考虑创建一个样式组件，我目前应用了 className="text-center" 道具，但我想将其更改为将其包含在样式化的组件定义。类似styled(text-center) font-color: #abc123;`