Установить 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 / текстовое поле /

Как я могу изменить TextField высота?Я не могу найти это в документации.Когда я пытаюсь изменить его непосредственно в CSS, он работает неправильно (выглядит вот так - выбранная высота на экране 26px).

Что мне делать?

Answer 1

Другой ответ полезен, но не сработал для меня, потому что если label используется в компоненте outlined (как в вопросе), он оставляет 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 соответствующим образом.
• Это решение не не поддерживает изменение размера шрифта TextField.Я пытался заставить это работать, но столкнулся со всевозможными проблемами со стилем label.Возможно, это можно сделать, но мне это не нужно.Мне просто нужен был немного более компактный TextField, и я обнаружил, что height, установленный на 44, с неизменным размером шрифта, вполне подойдет для этого.

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

И - это песочница с кодом с тем же кодом, чтобы вы могли видеть, что он работает.