如何覆盖 prime-react 组件 CSS 样式?
How to override prime-react component CSS styling?
我正在使用 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 属性存储在另一个文件中,然后将其导入所需的文件中。我尝试了这部分,但也没有成功。
我在 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/
您也可以尝试 patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz 示例。
我正在使用 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 属性存储在另一个文件中,然后将其导入所需的文件中。我尝试了这部分,但也没有成功。
我在 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/
您也可以尝试 patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz 示例。