如何覆盖主要反应组件CSS样式？

问题描述

我正在使用prime-react设置我的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属性存储在另一个文件中，然后将其导入所需的文件中。我尝试了这部分，但也没有解决。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）