1

我正在尝试找到覆盖用于 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 主题文件中复制所有代码，然后在覆盖文件中慢慢开始调整它。

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

谢谢

4

3 回答 3

1

像你说的一种选择是复制所有的css，然后隐藏它们的导入。这可能比您需要做的工作更多，具体取决于您要执行的操作。

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

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

于 2020-09-01T16:18:57.980 回答
0

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

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

如果您想使用样式组件，这个答案可能会有所帮助。PrimeReact 和样式化组件

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

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

于 2020-09-01T16:16:41.783 回答
0

主题之后的后续 CSS 导入将覆盖模板，因为最后一个 CSS 规则在 CSS 中具有更高的特异性（优先级）

在 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")
    );
于 2021-10-28T21:42:02.333 回答