PrimeReact和样式组件

时间:2017-09-18 10:48:54

标签: css reactjs styled-components primereact

我似乎无法使用样式化组件设置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;
    }
`;

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

PrimeReact具有许多样式,这些样式与单独的sass样式表一起应用,通常结合了多个类名和html标签。

要赢得风格,就需要更多CSS特异性。

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

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

这将生成3个相同的类名,Styled Components docs建议这样做。需要更多的类名特异性吗?使用更多&

或者您可以输入!important。我已经看到了这个。

或编辑their sass file