TextField에서 자리 표시 자 스타일 지정

Question

TextField API에는 input 요소의 의사 자리 표시 자 요소의 스타일을 지정하는 방법에 대한 언급이 없습니다.

기본적으로 자리 표시 자 텍스트의 기본 스타일을 변경하고 싶습니다. the normal bag of tricks이 작동하지 않습니다. 요소에 액세스 할 수 없기 때문입니다.

내가 사용할 수있는 방법이 있습니까? 그렇다면 JSS/React/DOM과 같은 방법으로 ::-webkit-input-placeholder을 쓰는 방법은 무엇입니까?

Answer 1

사례 1

의 label 속성에 원하는 자리 표시 자 텍스트를 입력하십시오.구성 요소를 사용하고 TextField의 labelClassName 속성을 사용하여 사용자 정의하십시오. className, classes 또는 style 속성을 사용하여 InputLabelProps을 전달할 수도 있습니다. TextField의 label 속성을 사용하고 대신 placeholder 건물에 자리 표시 자 텍스트를 넣어에서

사례 2

자제. InputProps을 사용하여 생성 된 HTML input 요소의 클래스를 재정의합니다.

코드 코드는 아래에 언급 한 경우를 모두 포함

. CodeSandbox snippet.

import React from 'react'; 
import TextField from 'material-ui/TextField'; 
import { withStyles } from 'material-ui/styles'; 
import withRoot from '../components/withRoot'; 

const styles = { 
    'input-label': { 
    textOverflow: 'ellipsis', 
    whiteSpace: 'nowrap', 
    overflow: 'hidden', 
    width: '100%', 
    color: 'red' 
    }, 

    'input': { 
    '&::placeholder': { 
     textOverflow: 'ellipsis !important', 
     color: 'blue' 
    } 
    } 
}; 

class Index extends React.Component { 
    render() { 
    return <div style={ {width: 150, margin: '0 auto'} }> 
     {/* Uses "label" and "labelClassName". */} 
     <TextField 
     fullWidth 
     label='I am a really really long red TextField label' 
     labelClassName={ this.props.classes['input-label'] } /> 

     {/* Uses "label" and InputLabelProps" with inline styles. */} 
     <TextField 
     fullWidth 
     label='I am a really really long green TextField label' 
     InputLabelProps={{ 
      style: { 
      textOverflow: 'ellipsis', 
      whiteSpace: 'nowrap', 
      overflow: 'hidden', 
      width: '100%', 
      color: 'green' 
      } }} /> 

     {/* Uses "placeholder" and "InputProps" with "classes". */} 
     <TextField 
     fullWidth 
     margin='normal' 
     placeholder='I am a really really long glue TextField label' 
     InputProps={{ classes: {input: this.props.classes['input']} }} /> 
    </div>; 
    } 
} 

export default withStyles(styles)(Index); 

Answer 2

는 제가 내측 입력 요소에 액세스 할 수있는 방법에 대한 적절한 대답을 발견하지 않았지만 한 JSS을 사용하여 틀 부재를 타겟팅 할 수 방법으로, I는 TextField가 구성된다의 Input 소자의 응답 in the source을 발견 .

기본적으로, 그것은 바로 CSS 이름을 사용하고, 단지 따옴표로 묶여 : 이 '&::-webkit-input-placeholder': { color: 'blue' }

Answer 3

당신은 css에 ::placeholder 선택기를 사용하여 입력에 스타일을 추가 할 수 있습니다 작동합니다

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: pink; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
    color: pink; 
} 
:-ms-input-placeholder { /* IE 10+ */ 
    color: pink; 
} 
:-moz-placeholder { /* Firefox 18- */ 
    color: pink; 
}