CSS 设置TextField高度material-ui

Set TextField height material-ui

提问by Andrey Radkevich

index.js

索引.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

样式.js

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

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

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

How can I change TextFieldheight? 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).

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

What should I do?

我该怎么办？

回答by davnicwil

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

另一个答案很有用，但对我没有label用，因为如果在outlined组件中使用了 a （就像在问题中一样），它会离开未label居中的位置。如果这是您的用例，请继续阅读。

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

的方式<label>组件的样式有些特质，使用position: absolute和transform。我相信这样做是为了在您专注于该领域时使动画工作。

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

以下对我有用，使用最新的 material-ui v4（它也适用于v3）。

// 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',
      },
  }}
/>

Notes

笔记

• I just used inline styles rather than the withStylesHOC, as this approach just seems simpler to me
• The focusedvariable is required for this solution - you get this with final-form, formikand 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 labelOffsetto center the labelwhich is coupled to the static heightyou choose. If you want to edit height, you'll also have to edit labelOffsetappropriately.
• This solution does notsupport 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.

• 我只是使用内联样式而不是withStylesHOC，因为这种方法对我来说似乎更简单
• 该focused变量需要这种解决方案-你得到这个有final-form，formik而且很可能其他形式的库。如果您只是使用 rawTextField或其他不支持此功能的表单库，则必须自己进行连接。
• 该解决方案依赖于一个幻数labelOffset来居中，label它与height您选择的静态耦合。如果您想编辑height，您还必须进行labelOffset适当的编辑。
• 此解决方案不支持更改标签字体大小。您可以更改输入字体大小，前提是您认为输入字体大小与标签不匹配。问题在于，在 javascript 中根据一个幻数比率计算在轮廓边框中放置标签的“缺口”的大小，该比率仅在标签字体大小为默认值时才有效。如果您将标签字体设置得更小，那么当标签显示在边框中时，凹口也会太小。没有简单的方法可以覆盖它，除了自己重复整个计算并通过 CSS自己设置槽口的宽度（组件是fieldset> legend）。对我来说这不值得，因为我可以使用高度为 44px 的默认字体大小。

回答by Ryan Cogswell

You didn't show how you tried to specify the height, but the approach you used for font-size is the right approach. Here's an example showing two text fields with different heights:

您没有展示如何尝试指定高度，但是您用于 font-size 的方法是正确的方法。这是一个示例，显示了具有不同高度的两个文本字段：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
};
function App(props) {
  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: props.classes.input2 } }}
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

And here is a code sandboxwith the same code so you can see it running.

而这里是一个代码，沙箱与相同的代码，所以你可以看到它运行。

回答by Bruno Crosier

The component takes a multilineprop which is a boolean. Set this to true, and then set the component's rowsprop to a number.

该组件采用multiline一个布尔值 prop。将此设置为 true，然后将组件的rowsprop设置为一个数字。

   <TextField
      multiline={true}
      rows={3}
      name="Description"
      label="Description"
      placeholder="Description"
      autoComplete="off"
      variant="outlined"
      value={description}
      onChange={e => setDescription(e.target.value)}
    />

回答by Yoseph

This works with material-ui v3,

这适用于 material-ui v3，

<div className="container">
  <TextField
    label="Full name"
    margin="dense"
    variant="outlined"
    autoFocus
  />
</div>

.css

.css

.container input {
  height: 36px;
  padding: 0px 14px;
}

.container label {
  height: 36px;
  top: -6px;
}

.container label[data-shrink="true"] {
  top: 0;
}

https://codesandbox.io/s/elated-kilby-9s3ge

https://codesandbox.io/s/elated-kilby-9s3ge