javascript - 如何克服来自两个 CSS 框架的相似名称 CSS 类的重叠？

Question

我在 create-react-app 元素中使用 semanctic-ui-react 的 Modal。在 index.js 中，我声明了框架 CSS 文件的导入

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

我注意到 Modal 的奇怪定位。调试后我发现 .modal CSS 类被应用，它来自 Bootstrap 的 CSS。由于 semantic-ui 也有类似名称的类，因此造成了重叠。
删除 import "bootstrap/dist/css/bootstrap.css" 后，Modal 得到正确定位。

我心中的解决方案(部分):
仅在使用它的类中导入 CSS 文件，而不是 index.js
- 这有两个问题:
1.假设EditForm.js使用semantic-ui，我导入semantic.min.css 直接在这个文件中。但是，如果它是其中的父类怎么办 使用 EditForm.js，如果 parent.js 使用 bootstrap.css 则再次使用 也会出现同样的问题。
2. 我不确定这一点，但是为每个文件单独导入完整的 CSS 会使这些文件变重，请在此处纠正我。

我想在我的元素中同时使用这两个框架，理想的方式是什么？

Answer 1

你必须同时使用它们吗？如果是这样，另一个要考虑的解决方案是在您的元素中实现 SASS/SCSS。SASS 通常捆绑在许多开箱即用的使用 webpack 的安装中。我只在 vanilla、Vue 和 Angular 元素中使用过它，但我 100% 确定 React 不会有任何问题，并且 CRA 能够为它生成必要的配置。

如果你安装了 SASS，你有很多方法来处理这个问题。我会想到的两个是:

1. 您可以选择一个库作为您的“主要”库并正常导入它，而另一个您可以在 css 规则中“确定范围”。这是可能的，因为 SASS 会自动解包导入并将其插入到该 css 规则下，有效地“限定”它。默认情况下，CSS 不会这样做。

.smui {
  @import "semantic.css";
}

在这里阅读更多:https://sass-lang.com/documentation/at-rules/import#nesting

1. 我没有检查语义 UI 的 sass 支持，但 Bootstrap 是在 SASS 中模块化构建的，它允许您有选择地导入所需的部分。因此，假设您想在 Bootstrap 的网格布局中使用语义按钮。您无需引入所有 Bootstrap ，只需导入网格模块即可。

@import "semantic-ui";

/* Required */
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

.bs {
   /* Part you actually need */
   @import "node_modules/bootstrap/scss/grid";
}

这会将占用空间减少到仅您需要的大小，减少您的 CSS 大小，并减少您不想被覆盖的元素/类的样式重叠。