设置TextField的高度material-ui [英] Set TextField height 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))

style.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).

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).

我该怎么办?

推荐答案

另一个答案是有用的，但对我不起作用，因为如果outlined组件中使用了label(就像在问题中一样) )，使label保持不居中.如果这是您的用例，请继续阅读.

The other answer is useful but didn't work for me because if a label is used in an outlined component (as it is in the question) it leaves the label uncentered. If this is your usecase, read on.

使用position: absolute和transform设置<label>组件样式的方式有些特殊.我相信这样做是为了使动画在您聚焦时发挥作用.

The way the <label> component is styled is somewhat idiosyncratic, using position: absolute and transform. I believe it's done this way to make the animation work when you focus the field.

以下内容适用于我，使用最新的材料用户界面 v4 (它也可以与 v3 一起使用).

The following worked for me, with the latest material-ui v4 (it should work fine with v3 too).

// height of the TextField
const height = 44

// magic number which must be set appropriately for height
const labelOffset = -6

// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???

---

<TextField
  label="Example"
  variant="outlined"

  /* styles the wrapper */
  style={{ height }}

  /* styles the label component */
  InputLabelProps={{
    style: {
      height,
      ...(!focused && { top: `${labelOffset}px` }),
    },
  }}

  /* styles the input component */
  inputProps={{
      style: {
        height,
        padding: '0 14px',
      },
  }}
/>

注释

• 我只是使用内联样式而不是withStyles HOC，因为这种方法对我来说似乎更简单
• 此解决方案需要focused变量-您可以通过final-form，formik以及可能的其他表单库获得此变量.如果您仅使用原始的TextField或其他不支持此功能的表单库，则必须自己进行连接.
• 该解决方案依赖于幻数labelOffset将label居中，该label与您选择的静态height耦合.如果要编辑height，还必须适当地编辑labelOffset.
• 此解决方案不不支持更改标签字体大小.您可以更改输入字体的大小，除非您认为该字体和标签之间不匹配，否则可以更改.问题是，在JavaScript中根据标准的魔术数字比率计算在边框中容纳标签的缺口"的大小，而魔术数字比率仅在标签字体大小为默认字体时才有效.如果将标签字体大小设置得较小，则标签在边框中显示时，凹口也将太小.没有简单的方法可以覆盖它，除非您自己重复整个计算并通过CSS自行设置槽口的宽度(组件为fieldset> legend).对我来说，这是不值得的，因为我可以使用高度为44px的默认字体大小.

• I just used inline styles rather than the withStyles HOC, as this approach just seems simpler to me
• The focused variable is required for this solution - you get this with final-form, formik and probably other form libraries. If you're just using a raw TextField, or another form library that doesn't support this, you'll have to hook this up yourself.
• The solution relies on a magic number labelOffset to center the label which is coupled to the static height you choose. If you want to edit height, you'll also have to edit labelOffset appropriately.
• This solution does not support changing the label font size. You can change the input font size, only if you're fine with there being a mismatch between that and the label. The issue is that the size of the 'notch' that houses the label in the outlined border is calculated in javascript according to a magic number ratio that only works when the label font size is the default. If you set the label font size smaller, the notch will also be too small when the label shows in the border. There's no easy way to override this, short of repeating the entire calculation yourself and setting the width of the notch (the component is fieldset > legend) yourself via CSS. For me this wasn't worth it, as I'm fine with using the default font sizes with a height of 44px.

这篇关于设置TextField的高度material-ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！