PrimeReactとstyled-component

Question

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

Answer 1

styled-componentsは、コンポーネントに渡されるべきclassNameを生成します。 InputTextは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; 
    } 
`; 

、あなたは、単に別のコンポーネントでそれをラップすることができます：

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

グローバルクラススタイルをオーバーライドしようとしています。コンポーネントのスタイルをstyled-componentと変更するには、must accept className propertyを使用します。 InputTextはclassName小道具を受け入れた場合、あなたはそれでのスタイルを試すことができます。

const StyledInputText = styled(InputText)` 
    width: 1000px; 
`; 

とあなたのコンポーネントで：

class Component extends React.Component { 
    renderValueDateAndAmount() { 
     return (
      <StyledInputText /> 
     ) 
}