I am currently trying to set a custom data attribute to a TextField component as such:
class TestTextField extends React.Component {
componentDidMount() {console.log(this._input)}
render() {
return (
<TextField
label="Label 1"
InputProps={{placeholder: 'Input 1', 'data-state': 'Data State 1'}}
margin="normal"
inputRef={(elem) => {this._input = elem}}
/>
)
}
}
However I can't get data-state
to show up with the console log saying
<textarea rows="1" class="MuiTextarea-textarea-67 MuiInput-input-56 MuiInput-inputMultiline-64" placeholder="Input 1" type="text">
Are custom attributes not supported for TextField? I am using v1.0.0-beta.6 (https://material-ui-1dab0.firebaseapp.com/api/text-field/)
As you can see custom props are passed to the FormControl component. What you want is probably inputProps
which is then passed down to the actual <input />
(InputComponent
is "input"
by default)