如何覆盖prime-react组件CSS样式?
Posted
技术标签:
【中文标题】如何覆盖prime-react组件CSS样式?【英文标题】:How to override prime-react component CSS styling? 【发布时间】: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 属性存储在另一个文件中,然后将其导入所需的文件中。我尝试了这部分,但也没有成功。
【问题讨论】:
【参考方案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 示例。
【讨论】:
以上是关于如何覆盖prime-react组件CSS样式?的主要内容,如果未能解决你的问题,请参考以下文章