如何让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
作为您创建的每个组件实例的道具,这肯定会成为自我鞭笞的练习。
即使您设置了一个全局常量并将其导入并与您的组件一起使用,您仍然必须将它贯穿到所有地方,并且需要附加组件名称。
例如,锚点的 defaultProps
是 prefixCls: 'ant-anchor'
。
希望这对您有所帮助,祝您好运!
我们最终使用了特定的 CSS 补丁文件,并在需要时添加规则。
不是很完美,但是 none 的建议路径完成了我们预期的工作。
我们正在开发一个 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
作为您创建的每个组件实例的道具,这肯定会成为自我鞭笞的练习。
即使您设置了一个全局常量并将其导入并与您的组件一起使用,您仍然必须将它贯穿到所有地方,并且需要附加组件名称。
例如,锚点的 defaultProps
是 prefixCls: 'ant-anchor'
。
希望这对您有所帮助,祝您好运!
我们最终使用了特定的 CSS 补丁文件,并在需要时添加规则。
不是很完美,但是 none 的建议路径完成了我们预期的工作。