PrimeReact 및 스타일이 지정된 구성 요소

Question

스타일이 지정된 구성 요소로 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.

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

을하고 구성 요소 : InputText이 className 소품을 받아 경우하여 스타일을 시도 할 수 있습니다

이

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