javascript – 如何克服两个CSS框架中类似名称CSS类的重叠？

我在create-react-app项目中使用了模拟semanctic-ui-react.在index.js里面我已经声明了框架的CSS文件的导入

import "semantic-ui-css/semantic.min.css"
import "bootstrap/dist/css/bootstrap.css"

我注意到莫代尔奇怪的定位.经过调试后,我发现一个.modal CSS类正在应用,它来自Bootstrap的CSS.由于semantic-ui也具有相似的名称类,因此导致了重叠.
在删除导入“bootstrap / dist / css / bootstrap.css”时,Modal可以正确定位.

解决方案(部分)在我的脑海里：
仅在使用它的类中导入CSS文件,而不是导入到index.js
– 这有两个问题：
 1.假设EditForm.js使用semantic-ui,我导入semantic.min.css
    直接在这个文件中.但是,如果它的父类是什么呢？
    如果parent.js再次使用bootstrap.css,则使用EditForm.js
    会出现同样的问题.
 2.我不确定这一点,但是为每个文件单独导入完整的CSS可能会使这些文件变重,请在此处更正.

我想在我的项目中使用这两个框架,这将是什么样的理想方式？

解决方法:

我不建议为您的组件分配一个ID并在那里写下您的替代.这将迫使您在整个应用程序中使用该ID,这是您不想要的.

您有两种选择：

1)最简单的选项是build your own version of Bootstrap,它只包含您在应用中实际使用的组件的样式.这也将减少用户下载以呈现应用程序的样式数量.只需从构建中排除“模态”(以及您不使用的任何其他引导程序组件).

2)在您正在使用的两个库之间进行类比较.在任何浏览器中使用开发人员工具实际上都很容易.每次您定位的组件与您的某个样式表中的类匹配时,您都会看到.一些规则将在一个规则中划掉,一些规则将在另一个规则中划掉.如果您希望Semantic UI的样式优先,您将需要创建一个单独的样式表,以增加从语义UI中丢失的样式属性的特异性.我的猜测是,可能只有少数样式属性被覆盖或您不想要.

如果您不想创建单独的文件并将它们内联添加到组件中,您还可以将上述样式放在样式上的样式中,实际上比CSS文件中的样式更具体.

标签：javascript,css,reactjs,semantic-ui-react
来源： https://codeday.me/bug/20190710/1424882.html