代码之家 › 专栏 › 技术社区 › Andrii Radkevych

设置文本字段高度材质界面

material-ui reactjs css

Andrii Radkevych · 技术社区 · 6 年前

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

样式.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

我该怎么办?

1 回复 | 直到 5 年前

davnicwil 5 年前

另一个答案是有用的,但不适用于我,因为如果 label outlined 组件(如问题中所示)离开 标签 无中心。如果这是您的用例,请继续阅读。

<label> position: absolute 和 transform . 我相信这样做是为了让动画在你聚焦领域时发挥作用。

第4版 (它应该可以与也是)。

// 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 因为这种方法对我来说更简单
这个 focused 变量是此解决方案所必需的-您可以通过 final-form formik 可能还有其他表单库。如果你只是用生的 TextField
labelOffset 使…居中 标签 与静电耦合 height 高度 ,您还必须编辑适当地。
此解决方案没有 fieldset &燃气轮机; legend )你自己通过CSS。对我来说,这是不值得的,因为我可以使用默认字体大小的高度为44像素。

SAUMITRA KUMAR 4 年前

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

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

Ryan Cogswell 6 年前

下面的示例显示了两个高度不同的文本字段:

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

Bruno Crosier 5 年前

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)}
    />

Léon Logli 4 年前

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

.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;
}

为了用户,以上所有代码块都可以定义为可以在整个代码库中重复使用

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 */
  }

Anne 4 年前

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

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

Yoseph 5 年前

这适用于材质ui v3,

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

.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