PrimeReact и Styled-компонент

Question

Я не могу создать стиль компонента PrimeReact с помощью styled-component.

Учитывая приведенный ниже код для визуализации 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 идентичных имени класса и рекомендуется документами Styled Components. Требуется больше специфичности для имени класса? Используйте больше &s.

Или вы могли бы положить в !important, Я видел это вокруг.

Или отредактируйте их файл sass.