覆盖 PrimeReact 样式

Posted 2023-02-22

【中文标题】覆盖 PrimeReact 样式

【英文标题】：Overriding PrimeReact Styling

【发布时间】：2020-12-20 17:54:26

【问题描述】：

我正在尝试找到覆盖用于 Prime React 的默认“Nova”主题的最佳解决方案。我知道他们有一个可供购买的主题设计师，但我最好不要使用它。 以前，我的反应应用程序中的每个 tsx 文件都有一个 scss 文件。我正在使用诸如 -

之类的行

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

我基本上把 !important 放在所有地方，它开始变得非常混乱。 我考虑过在我的 index.tsx 文件中注释掉 Prime React 主题的导入

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

并改为导入我自己的 scss..

import './styles/Override.scss';

这使得样式完全消失，页面看起来就像是纯粹的 html。我在想也许我应该从 Nova 主题文件中复制所有代码，然后在覆盖文件中慢慢开始调整它。

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

谢谢

【参考方案1】：

你说的一个选项是复制所有的css，然后隐藏它们的导入。根据您要执行的操作，这可能比您需要的更多。

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

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

【参考方案2】：

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

您是否尝试过一些模块化的 CSS 解决方案？喜欢 Styled-jsx 还是 Styled-Components？

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

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

希望我能以某种方式提供帮助:)

【参考方案3】：

主题之后的后续 CSS 导入将覆盖模板为 CSS 中的 the last CSS rule has higher specificity（优先级）

在 create-react-app index.tsx (typescript .js) 之后，index.css 将覆盖导入的主要主题，但子 React“App”组件中的 CSS 导入不会覆盖主题，因为它是先进口。 （除非你用 !important 覆盖，否则最后一个适用的 CSS 会被使用。）

    import React from "react";
    import ReactDOM from "react-dom";
    import reportWebVitals from "./reportWebVitals";
    import App from "./App";
    
    import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
    import "../node_modules/primereact/resources/primereact.min.css";
    import "../node_modules/primeicons/primeicons.css";
    
    import "./index.css";
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById("root")
    );

你可以让你的 React 组件的 CSS（如“App”）覆盖 React Prime 主题，方法是首先导入主题 CSS，然后是组件，然后再将它们的 CSS 放在后面和更高的优先级。

    import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
    import "../node_modules/primereact/resources/primereact.min.css";
    import "../node_modules/primeicons/primeicons.css";
    
    import React from "react";
    import ReactDOM from "react-dom";
    import reportWebVitals from "./reportWebVitals";
    import App from "./App";
    
    import "./index.css";
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById("root")
    );