设置TextField高度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))

样式.js

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

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

如何更改 TextField 高度？我在文档中找不到它。当我尝试直接在 CSS 中更改它时，它无法正常工作（看起来 像这样- 屏幕上选择的高度为 26px）。

我应该怎么办？

原文由 Andrey Radkevich 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以尝试添加 Textfield API 中提到的 size=“small”

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

原文由 SAUMITRA KUMAR 发布，翻译遵循 CC BY-SA 4.0 许可协议