覆盖PrimeReact样式

问题描述

我正在尝试找到最好的解决方案，以覆盖用于Prime React的默认“ Nova”主题。我知道他们有一个主题设计师可以购买，但是理想情况下我不希望使用它。 以前，我在react应用程序中的每个tsx文件中都有一个scss文件。我使用的是-

.p-dropdown-trigger {
   background-color: brown !important;
   margin-left: 5px !important;
}

我基本上把！important放在各处，并且开始变得非常混乱。 我曾考虑过在index.tsx文件中注释掉Prime Prime主题的导入

// import 'primereact/resources/themes/nova/theme.css';

然后导入我自己的scss。.

import './styles/Override.scss';

这使样式完全消失，页面看起来像纯HTML。我在想也许我应该从Nova主题文件中复制所有代码，然后在覆盖文件中慢慢开始对其进行调整。

有人有更好的方法或想法吗？

谢谢

解决方法

您说过的一种选择是复制所有CSS，然后隐藏其导入。根据您要执行的操作，这可能比您需要的工作还要多。

我可能宁愿创建一个override.scss并专门覆盖规则，使用scss嵌套应该不会太疯狂。但是，避免使用！important的一个技巧是更具体地定位HTML元素。例如，如果
的CSS规则 body header ul a { color: pink; }
那么您可以通过更具体地覆盖规则并编写：
body header ul li > a { color: blue; }

但是，如果您要覆盖的规则中包含!important，则必须在新规则中使用!important覆盖它。

,

嗯，如果我可以访问更多代码，例如，我可能会提供更多帮助在codesandbox.io中。

您尝试一些模块化CSS解决方案吗？像Styled-jsx或Styled-Components？

如果您想使用样式化组件，此答案可能会有所帮助。 PrimeReact and styled-component

另一种解决方案是，在您自己的样式表之前（在HTML内）将样式表与PrimeReact链接。此解决方案需要对webpack的样式实现进行深入分析。

希望我能以某种方式提供帮助：）