PrimeReact 和样式组件 [英] PrimeReact and styled-component

问题描述

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

给定下面的代码来呈现一个 InputText，我的目的是改变它的宽度.但它不起作用.

从styled-components"导入样式；从 'primereact/components/inputtext/InputText' 导入 {InputText}；类组件扩展 React.Component {使成为() {返回 (<输入文本/>)}const ComponentView = 样式(组件)`.ui-inputtext {宽度:1000px；}`;

解决方案

styled-components 生成应该传递给组件的 className.

从styled-components"导入样式；从 'primereact/components/inputtext/InputText' 导入 {InputText}；类组件扩展 React.Component {使成为() {返回 (<InputText className={this.props.className}/><----这里)}const ComponentView = 样式(组件)`.ui-inputtext {宽度:1000px；}`;

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

从styled-components"导入样式；从 'primereact/components/inputtext/InputText' 导入 {InputText}；类组件扩展 React.Component {使成为() {返回 (<div className={this.props.className}><----这里<输入文本/>

)}const ComponentView = 样式(组件)`.ui-inputtext {宽度:1000px；}`;

I can't seem to style a PrimeReact component with styled-component.

Given the below code to render an InputText, my intention is to change the width of it. But it doesn't work.

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

解决方案

styled-components generates a className that should be passed to the component.

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

If InputText doesn't accept className, you can simply wrap it with another component:

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

这篇关于PrimeReact 和样式组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！