设置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))

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

我该怎么办？

Answer 1

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

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

Answer 2

首先，我对这篇文章中所有可怜的人表示同情，他们发现自己正在与 MUI 组件的尴尬设计作斗争。其次，如果您使用主题和 TextField 的“填充”变体，则此解决方案可能适合您。使用 Chrome 开发工具，我发现可以使用类“MuiFormControl-root”和“MuiInputBase-root”成功调整 div 的高度。这就是我的代码的样子（结果可能会有所不同）：

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

Answer 3

  <TextField
    id="outlined-multiline-static"
    label="Multiline"
    multiline
    fullWidth
    defaultValue="Default Value"
    inputProps={{
      style: {
        height: "600px",
      },
    }}
  />

Answer 4

该组件采用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)}
    />

Answer 5

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

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

Answer 6

改变高度很简单，可以使用来实现

InputProps={{style: { fontSize: '1.8rem', height: 70 },

但这还不够，因为标签（在本例中为占位符）不会居中。标签可以使用以下方法居中：

sx={{'.MuiFormLabel-root[data-shrink=false]': { top: <put desired value here>} }}

Answer 7

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

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

以下内容适用于我，适用于最新的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',
      },
  }}
/>

笔记

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

Answer 8

使用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;
}

对于样式组件用户，以上所有代码块都可以定义为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 */
  }

Answer 9

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

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

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