Выровнять текст по вертикали поверх пользовательского интерфейса материала

Question

У меня есть этот компонент

const styles = theme => ({
  height: {
    height: '20rem',
  },
});

class Foo extends React.component { 
    ...

    <TextField
      InputProps={{ classes: { root: this.props.classes.height } }}
      label="Kittens"
      placeholder="Meooow"
      fullWidth={true}
      margin="normal"
      variant="outlined"
      notched={true}
      value={this.state.kittyCat}
      onChange={event => this.onChangeKittens(event)}
      multiline={true} />
}

Высота применяется, увеличивая <TextField />.Однако я хочу выровнять текст по вертикали в <TextField />.

Как мне это сделать?

Answer 1

Вы можете выровнять текст по вертикали, используя flex, например:

display:flex;
flex-direction: column;
justify-content: center;

Однако Material-UI TextField создает контейнер div, который имеет два внутренних элемента - еще один div и label.

Часть label по умолчанию имеет позицию absolute (для эффекта анимированной метки), что может затруднить достижение того, что вы хотите, без каких-либо переопределений css.

Лучшим подходом может быть установка стилей для контейнера TextField. Вы можете сделать это, используя систему стилей материала, как в вашем примере кода:

const styles = theme => ({
  container: {
    height: '20rem',
    display: 'flex',
    flexDirection: 'column'
    justifyContent: 'center',
  },
});

class Foo extends React.component { 
    ...
    <form className={classes.container>
       <TextField
         ... />
    </form>
}

Обновление: я добавил Демо в песочнице .

Проверьте это для получения дополнительной информации о flexbox