时间戳

首页 > 解决方案 > 设置TextField高度material-ui

css - 设置TextField高度material-ui

问题描述

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）。

我应该怎么办？

标签： cssreactjsmaterial-ui

解决方案

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

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

推荐阅读