는

Question

내가 워드 프로세서 정말 이해가되지 않는 TextField

의 한 번 사용을 위해 스타일을 변경하는 방법을 이해하려고 시간의 지옥을 데 재료 UI의 클래스를 사용하여 스타일을 재정의 할 수 없습니다 나

<FormControl> 
    <InputLabel 
    htmlFor="mobile-number-input" 
    > 
    Mobile Number 
    </InputLabel> 
    <Input 
    value={this.state.mobileNumber} 
    onChange={this.onMobileNumberChange} 
    fullWidth 
    classes={{ 
     inkbar: { 
     '&:after': { 
      backgroundColor: 'white', 
     } 
     } 
    }} 
    id="mobile-number-input" 
    /> 
</FormControl><br /> 

하지만이 오류를

Warning: Material-UI: the key `inkbar` provided to the classes property is not valid for Input. 
You need to provide a non empty string instead of: [object Object]. 

Answer 1

를 얻으려면 다른 클래스가 아닌 JSS 객체의 이름으로 inkbar를 오버라이드 (override) 할 필요가있다.

이 자신의 실제 이름에 JSS에 정의 된 클래스 이름을 매핑하는 classes 소품과 구성 요소를 제공하기 위해 구성 요소의 외부에서 JSS 객체를 선언하고 withStyles 고차원 구성 요소를 사용하는 일을 한 가지 방법 :

import { withStyles } from 'material-ui/styles'; 

const styles = { 
    inkbarOverride: { 
    '&:after': { 
     backgroundColor: 'white', 
    } 
    } 
}; 

const Test = ({ classes }) => 
    <FormControl> 
    <InputLabel 
     htmlFor="mobile-number-input" 
    > 
     Mobile Number 
    </InputLabel> 
    <Input 
     value={this.state.mobileNumber} 
     onChange={this.onMobileNumberChange} 
     fullWidth 
     classes={{ 
     inkbar: classes.inkbarOverride, 
     }} 
     id="mobile-number-input" 
    /> 
    </FormControl> 

export default withStyles(styles)(Test); 

자세한 내용은 Overriding with classes을 참조하십시오.