有没有办法设置导入的库，使其忽略我的自定义 CSS？

Posted 2023-03-23

技术标签:

【中文标题】有没有办法设置导入的库，使其忽略我的自定义 CSS？【英文标题】：Is there a way to set an imported library so that it ignores my custom CSS? 【发布时间】：2020-10-19 19:59:12 【问题描述】：

在我的 react 项目中，我在名为 project.css 的外部样式表文件中为按钮设置了这样的样式：

 button 
        max-width: 150px;
        margin: 20px 0;
        padding: 12px 20px;
        border-style: none;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;

这一直很好，但是我最近安装了一些也使用按钮的库。您在上面看到的我的按钮样式干扰了库使用的样式。

我想知道如何保留我的按钮样式，但让我使用的库忽略我的自定义按钮样式。

这可行吗？

谢谢！

【问题讨论】：

【参考方案1】：

根据您的代码结构和库代码，有几个选项。

在您自己的之后加载库样式。当两个选择器具有相同的特异性时，最后一个加载的选择器适用。

在您的应用程序独有的父选择器下限定您的选择器

.mycode 按钮 ...

将您的选择器迁移到一个类，而不是定位按钮标签。

.mybutton ...