如何让Bootstrap3和Ant Design 3共存

How to make Bootstrap 3 and Ant Design 3 live together

我们正在开发一个 React 应用程序(使用 Create React App 而不弹出它),我们决定使用 Ant 作为我们的基础组件库。 现在我们接近项目的尾声,我们发现该应用程序将作为 "portlet" 集成到公司门户 (WebSphere) 中,因此我们从主页继承所有 CSS 文件。

这两个框架似乎都有自己的 reset 样式,但它们使用不同的值。 到目前为止,我一直没能在 Ant 中找到一个 LESS 变量可以用于 prefix 所有 Ant 的 CSS 规则。

有没有人试过让他们住在一起?

我们不拥有父开发,我们只能在 React 部分进行更改,所以只有与 Ant 相关的东西。

在这里你可以看到一些 default antd variables.

其中之一是@ant-prefix: ant;。我想你可以改变它并应用不同的风格。

那是一个艰难的过程,在开发的最后阶段也不例外!

正如@froston 提到的,您似乎已经尝试过 @ant-prefix: ant; 除此之外,您还需要将 prefixCls 作为您创建的每个组件实例的道具,这肯定会成为自我鞭笞的练习。

即使您设置了一个全局常量并将其导入并与您的组件一起使用,您仍然必须将它贯穿到所有地方,并且需要附加组件名称。

例如,锚点的 defaultPropsprefixCls: 'ant-anchor'

希望这对您有所帮助,祝您好运!

我们最终使用了特定的 CSS 补丁文件,并在需要时添加规则。

不是很完美,但是 none 的建议路径完成了我们预期的工作。