Case 1
Put the desired placeholder text in the label
property of the TextField
component, and use the labelClassName
property of the TextField
to customize it. You could also pass InputLabelProps
with a className
, classes
or style
attribute.
Case 2
Refrain from using the label
property of TextField
and put the placeholder text on its placeholder
property instead. Rely on InputProps
to override the generated HTML input
element's class.
Code
The code below covers both aforementioned cases. 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);