ReactJS导入组件Cron覆盖样式

Question

我注意到我的 ReactJS 应用程序更改了样式，尤其是在我从

react-cron-generator

导入 Cron 组件后的字体：

import Cron from 'react-cron-generator'

查看

cron.tsx

的代码，我发现应用了一些样式

import './cron-builder.css';

，从我的角度来看，这导致了问题，因为它有：

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

我想了解这种导入的组件如何覆盖我定义的样式，以及应该如何导入它以避免它。

我正在研究样式组件，但问题是，一旦我执行了

import Cron from 'react-cron-generator'

，我的样式总是会被覆盖。

有办法解决吗？

Answer 1

样式的应用取决于其选择器的详细程度。如果导入的样式具有更详细的选择器，并且您的样式没有那么具体，或者您没有指定该选择器，则将应用导入的样式。

请不要使用

important

。它可能会解决你的问题，但它不是一个干净且可维护的解决方案，尽管它在 css 世界很流行。