设置TextField高度material-ui答案

【问题标题】：Set TextField height material-ui设置TextField高度material-ui
【发布时间】：2019-05-20 02:39:21
【问题描述】：

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 中更改它时，它无法正常工作（它看起来 like this - 在屏幕上选择的高度为 26px）。

我该怎么办？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

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

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

【讨论】：

是的。但我们不能让它更大。只有 2 种尺寸可供选择。
能否请您提及其他 2 个尺寸选项？
谢谢你，哈哈

【解决方案2】：

另一个答案很有用，但对我不起作用，因为如果在 outlined 组件中使用 label （因为它在问题中），它会使 label 不居中。如果这是您的用例，请继续阅读。

<label> 组件的样式有些特殊，使用position: absolute 和transform。我相信这样做是为了在您聚焦领域时使动画正常工作。

以下对我有用，使用最新的材料-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',
      },
  }}
/>

备注

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

【讨论】：

【解决方案3】：

组件采用 multiline 属性，它是一个布尔值。将此设置为 true，然后将组件的 rows 属性设置为一个数字。

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

【讨论】：

这应该被标记为答案，因为这是最简单的选择。但仅适用于增加高度。
感谢您，从文档和示例中看不太明显。仍然不允许通过 css 进行精确的高度设置，但这适合我的用例。

【解决方案4】：

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

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

和here is a code sandbox 使用相同的代码，因此您可以看到它正在运行。

【讨论】：

所以只有当它们也有不同的字体大小时才可能有不同大小的文本字段？这对我来说似乎有点奇怪。
@pfincent 不，两者之间没有联系。事实上，我的示例有两个 TextField，它们的高度都不同于默认值，但只有第二个会改变字体大小。
哎呀，我的错。

【解决方案5】：

首先，我对这个线程中任何发现自己与 MUI 组件的笨拙设计作斗争的可怜灵魂表示同情。其次，如果您使用主题和 TextField 的“填充”变体，则此解决方案可能适合您。使用 Chrome 开发工具，我发现使用“MuiFormControl-root”和“MuiInputBase-root”类成功调整了 div 的高度。这是我的代码的样子（结果可能会有所不同）：

const theme = createMuiTheme({
  overrides: {
    MuiFormControl: {
      root: {
        height: '56px',
      },
    },
    MuiInputBase: {
      root: {
        height: '56px',
      },
    },
  },
})

【讨论】：

【解决方案6】：

使用material-ui v4+，您必须调整输入填充和标签位置以获得您想要的。

<TextField label="Label" variant="outlined" />

假设我们希望上面的 TextField 高度为 48px（它的默认大小为 56px），我们只需要在我们的 css 文件中执行 (56px - 48px) / 2 = 4px ：

.MuiTextField-root input {
  /* 14.5px = 18.5px - 4px (note: 18.5px is the input's default padding top and bottom) */
  padding-top: 14.5px;
  padding-bottom: 14.5px; 
}

.MuiTextField-root label {
  top: -4px;
}

.MuiTextField-root label[data-shrink='true'] {
  top: 0;
}

对于styled-components 用户，以上所有代码块都可以定义为Sass mixins，可以在整个代码库中重复使用

import { css } from 'styled-components'

const muiTextFieldHeight = (height: number) => {
  const offset = (56 - height) / 2

  return css`
    input {
      padding-top: calc(18.5px - ${offset}px);
      padding-bottom: calc(18.5px - ${offset}px);
    }

    label {
      top: -${offset}px;
    }

    label[data-shrink='true'] {
      top: 0;
    }
  `
}

然后在你的样式表中的某个地方

  .MuiTextField-root {
      ${muiTextFieldHeight(40)} /* set TextField height to 40px */
  }

【讨论】：

【解决方案7】：

要使其更窄，请设置高度，并在 TextField 上添加“密集”边距道具以保持标签正确对齐：

<TextField margin="dense" style={{ height: 38 }} />

【讨论】：

【解决方案8】：

这适用于material-ui v3，

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

.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

【讨论】：

【解决方案9】：

使用 React 和 "@mui/material": "^5.2.2",

import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function BasicTextFields() {
  return (
    <TextField
      label="Outlined"
      variant="outlined"
      InputLabelProps={{
        style: {
          fontSize: 14,
          backgroundColor: '#FFF',
          paddingLeft: 4,
          paddingRight: 4,
          color: '#383838',
        },
      }}
      inputProps={{
        style: {
          fontSize: 14,
          height: 40,
          width: 272,
          padding: '0 14px',
          fontWeight: 'bold'
        },
    }}
    />
  );
}

CSS

.MuiTextField-root{
  border: 1px solid $BORDER_COLOR_2;
  border-radius: 6px;
  height: 40px;
  box-shadow: 0px 2px 3px $BOX_SHADOW_1;
  color: $TEXT_COLOR_3;
  font-size: 14px;
  font-weight: bold;
}

.MuiTextField-root label {
  top: -6px;
}

.MuiTextField-root label[data-shrink='true'] {
  top: 0;
}

【讨论】：