PrimeReact 和样式化组件

Posted 2023-02-22

【中文标题】PrimeReact 和样式化组件

【英文标题】：PrimeReact and styled-component

【发布时间】：2018-02-26 21:08:36

【问题描述】：

我似乎无法使用 styled-component 设置 PrimeReact 组件的样式。

鉴于下面的代码来呈现一个 InputText，我的意图是改变它的宽度。但它不起作用。

import styled from "styled-components";
import InputText from 'primereact/components/inputtext/InputText';

class Component extends React.Component 
    render() 
        return (
            <InputText/>
        )


const ComponentView = styled(Component)`
    .ui-inputtext 
        width: 1000px;
    
`;

【参考方案1】：

styled-components 生成一个className，应该传递给组件。

import styled from "styled-components";
import InputText from 'primereact/components/inputtext/InputText';

class Component extends React.Component 
    render() 
        return (
            <InputText className=this.props.className /> <---- here
        )


const ComponentView = styled(Component)`
    .ui-inputtext 
        width: 1000px;
    
`;

如果InputText 不接受className，你可以简单地用另一个组件包装它：

import styled from "styled-components";
import InputText from 'primereact/components/inputtext/InputText';

class Component extends React.Component 
    render() 
        return (
            <div className=this.props.className> <---- here
                <InputText />
            </div>
        )


const ComponentView = styled(Component)`
    .ui-inputtext 
        width: 1000px;
    
`;

【参考方案2】：

PrimeReact 使用单独的 sass 样式表应用了很多样式，通常结合多个类名和 html 标签。

要让您的样式获胜，您需要更多的 CSS 特异性。

一种解决方案是使用嵌套选择器，例如：

const ComponentView = styled(Component)`
&&& 
    width: 1000px;
`

这将生成 3 个相同的类名，这是 Styled Components docs 推荐的。需要更多的类名特异性？多使用&s。

或者您可以输入!important。我见过这个。

或编辑their sass file。