问题描述
我正在使用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属性存储在另一个文件中,然后将其导入所需的文件中。我尝试了这部分,但也没有解决。
解决方法
我与React合作了一年多,见过许多不同的自定义组件的方法,到目前为止,我认为如果正确烹饪,样式化组件是自定义组件的最便捷方法。 我喜欢将所有样式化的自定义组件放在Component.js和Componnet.styled.js的名为styled.js的index.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模块。 本文可以为https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/
提供帮助 ,您还可以尝试 patch-styles,这是一种将 CSS/SCSS 模块应用于您的代码的更具声明性的方法。此外,请查看 StackBlitz 示例。