Блог

Главная - Вопросы по программированию - Как выровнять кнопку пользовательского интерфейса материала и текстовое поле в одной строке на одной высоте?

Как выровнять кнопку пользовательского интерфейса материала и текстовое поле в одной строке на одной высоте?

#css #reactjs #material-ui

#css #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь получить <Button> из библиотеки пользовательского интерфейса материала, чтобы а) располагаться на той же высоте, <TextField> что и рядом с ним; и б) выровнять его по тому же полю.

Оба <Button> и <TextField> каждый находятся внутри своего собственного <Grid> компонента (с контейнером, обертывающим их).

Контейнер <Grid> имеет prop alignItems="center" , который выдает этот результат: введите описание изображения здесь

Именно здесь я сталкиваюсь с трудностями, пытаясь получить высоту <Button> , соответствующую высоте поля ввода. Это должно быть относительно распространенным требованием — есть ли простой способ добиться этого?

Ответ №1:

Учитывая, что у вас есть каждый ваш элемент в <Grid> самом компоненте, это должно сработать:

https://codesandbox.io/s/material-ui-playground-forked-1yymw?file=/app.jsx

Комментарии:

1. Не совсем — это то же самое, что у меня на скриншоте. Мне нужно сделать кнопку той же высоты, что и текстовое поле, чтобы все они были одинаково выровнены.

2. ах, извините, я полностью пропустил вашу точку зрения. Итак, вам нужно align-items: stretch , чтобы элемент занимал все доступное пространство. Посмотрите ссылку еще раз, я ее обновил

3. Не беспокойтесь — спасибо за помощь! Кажется, я все еще не могу добиться нужного эффекта; Я думаю, это потому, что я использую Paper компонент. Не могли бы вы взглянуть на то, что у меня есть здесь: 7271d.csb.app

4. Просто удалите margin="normal" из своего <TextField> s (или установите для него значение «нет»), так как это делает элемент сетки выше, и, следовательно, кнопка слишком сильно растягивается «после» поля сетки

5. Ты друг-легенда. Такое простое исправление. Большое спасибо!!

Ответ №2:

Используйте container={true} for Grid , чтобы установить его как гибкий контейнер. Помимо этого, вы всегда можете использовать makeStyles для общей настройки стиля компонентов

MUI Grid container prop

Если true, компонент будет вести себя как гибкий контейнер.

 const useStyles = makeStyles({
  fullHeightButton: {
    height: "100%"
  }
});

function App() {

  const classes = useStyles();

  return (
    <React.Fragment>
      <Grid container={true}>
        <TextField variant="outlined"/>
        <Button variant="contained" color="primary"> </Button>
      </Grid>
      
      <br/>
      
      <Grid container={true}>
        <Grid><TextField variant="outlined"/></Grid>
        <Grid><Button classes={{root: classes.fullHeightButton}} variant="contained" color="primary"> </Button></Grid>
      </Grid>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("test"));  
 <body>
  <div id="test"></div>
  
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>

  <script type="text/babel">
    const { Button, Grid, makeStyles, TextField } = MaterialUI;
  </script>
</body>

Комментарии:

1. Как бы вы добились такого же результата как с Button и TextField внутри их собственных соответствующих Grid компонентов, но оба все еще упакованы в контейнер? Это проблема, с которой я имею дело

2. Я бы просто прибегнул к makeStyles

Ответ №3:

В моем случае у меня было две кнопки, которые располагались между a TextField , где расстояние между первой кнопкой и текстовым полем было неправильным, как показано:

Кнопки перед добавлением кода

Мой код был:

   <CardActions className='cardactions'>
    <Button variant='contained' color='error'> - </Button>
    <TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
    <Button variant='contained' color='success'> </Button>
  </CardActions>

Добавление sx={{ marginRight:1}} к первой кнопке исправило проблему.

Кнопки после добавления кода

Код после добавления:

   <CardActions className='cardactions'>
    <Button variant='contained' color='error' sx={{ marginRight:1}}> - </Button>
    <TextField id='outlined-basic' variant='outlined' size='small' type='number' label='Enter Quantity'/>
    <Button variant='contained' color='success'> </Button>
  </CardActions>