PrimeReact et style-composant

Question

Je n'arrive pas à styler un composant PrimeReact avec un composant stylé. Etant donné le code ci-dessous pour rendre un InputText, mon intention est de changer la largeur de celui-ci. Mais ça ne marche pas.

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 génère un className qui devrait être transmis au composant.

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

Si InputText n'accepte pas className, vous pouvez simplement l'envelopper avec un autre composant:

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

Vous essayez de remplacer les styles de classe mondiale. Afin de changer le style de composant avec styled-component il must accept className property. Si InputText accepte className prop, vous pouvez essayer de le style en:

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

et dans votre composant:

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