Set TextField height material-ui

Question

index.js

import React from 'react' import TextField from '@material-ui/core/TextField' import style from './style' import withStyles from 'hoc/withStyles' import { connect } from 'react-redux'  class SearchField extends React.Component {   constructor (props) {     super(props)     this.onChange = this.onChange.bind(this)   }    onChange (event) {     const { dispatcher } = this.props     this.props.dispatch(dispatcher(event.target.value))     event.preventDefault()   }    render () {     const { classes, placeholder } = this.props     return (       <TextField          label={placeholder}          placeholder={placeholder}         InputProps={{ classes: { input: classes.resize } }}         className={classes.textField}         margin="normal"         autoFocus={true}          variant="outlined"          onChange={this.onChange}       />     )   } }  export default withStyles(style)(connect()(SearchField)) 

style.js

export default function () {   return {     container: {       display: 'flex',       flexWrap: 'wrap'     },     textField: {       width: 'auto'     },     resize: {       fontSize: 11     }   } } 

https://material-ui.com/api/text-field/

How can I change TextField height? I can't find it in the documentation. When I try to change it directly in CSS it works incorrectly (it looks like this - selected height on the screen 26px).

What should I do?

Answer 1

You can try out adding the size="small" which is mentioned in the Textfield API

<TextField variant="outlined" size="small" / >