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

Question

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

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

HomePage.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 属性存储在另一个文件中，然后将其导入所需的文件中。我尝试了这部分，但也没有成功。

Answer 1

我在 React 工作了一年多，看到了很多自定义组件的不同方法，到目前为止，我认为 styled-components 是自定义组件的最方便的方法，如果你正确地处理它们的话。我喜欢将所有带有样式的自定义组件放在 index.js 附近的单独文件中，名为 styled.js of Component.js 和 Componnet.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/

Answer 2

您也可以尝试 patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz 示例。

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

How to override prime-react component CSS styling?

reactjs

sass

styled-components

react-css-modules

primereact