如何覆盖prime-react组件CSS样式？答案

【问题标题】：How to override prime-react component CSS styling?如何覆盖prime-react组件CSS样式？
【发布时间】：2021-01-20 01:28:28
【问题描述】：

我正在使用 prime-react 来设置我的 React 页面的样式。但我想要一个更紧凑的网站，只有很少的填充和最少的样式。为此，我想为 Prime-react 组件覆盖一些 CSS 属性。

例如，我正在尝试减少 MenuBar 的填充 -

主页.js

import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";

export default class HomeMenuBar extends Component {
    // menu code ...

    render() {
        return (
            <div>
                <div className="card">
                    <Menubar model={this.items} className={this.props.className} />
                </div>
            </div>
        );
    }
}

const ComponentView = styled(HomeMenuBar)`
    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
        padding: 0.1rem 1rem !important;
    }
`;

上面的代码对原始样式没有影响。我正在尝试使用this 组件。

但是，尤其是使用这些样式组件，我不喜欢它。我是新手，想知道是否有更好的选择，例如将 CSS 属性存储在另一个文件中，然后将其导入所需的文件中。我尝试了这部分，但也没有成功。

【问题讨论】：

标签： reactjs sass styled-components react-css-modules primereact

【解决方案1】：

我使用 react 一年多了，见过很多不同的自定义组件的方法，到目前为止，我认为 styled-components 是自定义组件最方便的方法，如果你做得对的话。我喜欢将所有带有样式的自定义组件放在 index.js 附近的一个单独文件中，称为 Component.js 和 Componnet.styled.js 的 styled.js（当然在单独的文件夹中 MyComponent/index.js）；

在 styled.js 中，您可以像这样导出所有组件：

export const Container = styled.div`
    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
        padding: 0.1rem 1rem !important;
    }
`

在 index.js 文件中，您可以像这样导入它们：

import {Container} from './styled' 
// or import * as Styled from './styled' (if you have a lot of customized components);

export default class HomeMenuBar extends Component {
    // menu code ...

    render() {
        return (
            <Container>
                <div className="card">
                    <Menubar model={this.items} className={this.props.className} />
                </div>
            </Container>
        );
    }
}

如果您想尝试更像经典 css 的东西，请尝试查看 css-modules。这篇文章可以帮助https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/

【讨论】：

如何处理进口问题？我创建了两个单独的文件。对于styled.js，我放了两个导入，import styled from "styled-components"; import HomeMenuBar from './MenuBar'，但它会引发错误ReferenceError: Cannot access 'HomeMenuBar' before initialization
抱歉，我在代码中的错误误导了您。我写过： ComponentView = styled (Home MenuBar) 而不是 ComponentView = styled.div
如果您想将 HomeMenuBar 用作其他组件的子组件并在其他地方再次对其进行自定义（可能仅适用于某个地方的某些独特情况，通常与按钮或其他常见组件一起发生）您可以用这样的样式再次包装它：CustomMenuBar = styled(HomeMenuBar) ..more styles... 但在这种情况下，在 HomeMenuBar 内部，您需要将 prop className 从 props 传递到渲染函数中的顶级容器。在我的示例中，它将是下一个：<Container className={this.props.className}> 甚至传递所有道具<Container props={...this.props}>

【解决方案2】：

您也可以尝试patch-styles，这是一种将 CSS/SCSS 模块应用到您的代码的更具声明性的方式。另外，请查看 StackBlitz 示例。

【讨论】：