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應傳遞到組件。

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

您試圖覆蓋全局類樣式。爲了改變組件樣式styled-component它must accept className property。 如果InputText接受className道具，你可以嘗試的風格是：

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

，並在您的組件：

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