如何在React.js中使用两种不同的CSS框架？

我在index.html中使用了两个CSS框架，如下所示 Materialize.css用于登录/登录，slick.css用于我网站的其余部分。 当框架定义为：

Materialize.css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Slick.css

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

然后输出：

如果框架定义为：

Slick.css

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

Materialize.css:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

然后输出：

但它在整个网站上实现了最后一个声明CSS框架。

---

如何实现不同的CSS框架？

在React、Angular和Vue等现代前端框架中使用全局样式的CSS/Javascript框架是可能的，但非常不鼓励

如果您愿意，您可以这样做，而且您不需要为他们的工作做任何特殊的事情。

假设您在网页中包含引导，并且希望使用按钮样式：

const SomeComponent=\u props=>(
嘿，我是纽扣
)

就这样。现在，如果两个全局CSS使用同一个类，会发生什么？比如“.btn”。在这种情况下，最后一个被包括在内的将获胜，而你[几乎]无法解决这个难题。这就是全局CSS的问题，也是现代项目不惜一切代价避免它的原因

这个冲突问题的解决方案是在JS解决方案中使用CSS，在JS解决方案中，我们将CSS导入到Javascript文件中，并且只使用我们需要的CSS选择器和类。这可能在某种程度上起作用，但它仍然是一种具有相关限制的黑客行为

实际上，如果vanilla JS库的级别非常低，并且您正在使用的特定前端框架（React，Angular）没有[good]适配器库，那么我们只强制将其与[React]集成

---

这就是答案中基于意见的部分的起点

对于材质设计和React，在React组件中使用材质设计实现更有意义，例如，与Materialize等材质设计的普通JS和CSS实现相比，它更容易与React集成

同样的方法也适用于Slick。谷歌“react carousel”，您将获得至少两个良好的carousel UI实现，您可以轻松地将其集成到react项目中