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中直接更改它时，它工作不正确，当我更改高度时，它看起来像这样：

enter image description here

我该怎么办？（屏幕上的选定高度为26px）

Answer 1

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

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

Answer 2

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

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使用相同的代码，因此您可以看到它正在运行。

Answer 3

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

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

以下内容适用于我，使用最新的材料用户界面 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，还必须适当编辑TextField。
此解决方案不不支持更改label字体大小。我试图进行这项工作，但遇到TextField样式的各种问题。可能可以做到，但我不需要。我只需要稍微紧凑一点的height，发现from itertools import product [" ".join(list(name)) for name in product(first_name, last_name)]设置为44，字体大小不变，就可以了。

Answer 4

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

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

Answer 5

这适用于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

Answer 6

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

Answer 7

对于material-ui v4 +，您必须调整输入的填充和标签的位置才能得到您想要的。

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

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

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

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

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

设置TextField高度材质ui

8 个答案: