PrimeReact和样式组件

Question

我似乎不能用样式组件来设计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;
    }
`;

Answer 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;
    }
`;

Answer 2

PrimeReact有许多应用于单独的sass样式表的样式，通常结合多个类名和html标记。

为了让你的风格获胜，你需要更多的CSS特性。

解决方案是使用嵌套选择器，如下所示：

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

这将生成3个相同的类名，这是样式组件文档推荐的。需要更多的类名专用性吗？使用更多的&。

或者你可以放一个!important。我见过这个。

或者编辑他们的sass文件。