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

Мне очень трудно добиться чего-то простого с Grid Component из MaterialUI. В частности, я хотел бы выровнять один элемент по левому краю, а другой по правому краю в одной строке макета.

Я тщательно искал и не нашел никаких решений, которые работают. Я пробовал много предложений, включая использование justifyContent и alignContent в Grid компоненте и в JSS, а также технику flex: 1 «проталкивания» содержимого.

Соответствующие фрагменты кода

Попытка разместить элемент <Typography> слева, а <FormGroup> справа:

<Container>
  <Grid container spacing={3}>
    <Grid className={classes.rowLayout}>
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>

Стиль UI JSS:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    alignItems: 'baseline'
  },
}));

Я также обнаружил, что, вообще говоря, это требует использования множества Grid компонентов, и я бы хотел написать более чистый код, если это возможно.

У вас есть какие-нибудь советы или способы решения этой проблемы?

Бесконечно благодарен,

Дэвис


reactjs javascript material-ui jss
person Davis Jones    schedule 25.03.2020    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Я думаю, что лучший вариант - использовать flex вот так:

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: '100%'
  },
  rowLayout: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center' // To be vertically aligned
  },
}));

В качестве второго варианта (и для меня это лучший вариант, поскольку вы используете Material UI в его самом полном выражении, что, если вы его используете, это лучшее, что можно сделать. Используйте библиотеку как можно чаще), вы можете сделать что-то вроде этого:

<Container>
  <Grid container spacing={3}>
    <Grid container direction="row" justify="space-between" alignItems="center">
      // Goal is to align this to the LEFT
      <Grid item xs={6}>
        <Typography variant="h6" gutterBottom>Some Text</Typography>
      </Grid>
      // Goal is to align this to the RIGHT
      <Grid item xs={3}>
        <FormGroup>
          // Simple `Switch` button goes here
        </FormGroup>
      </Grid>
    </Grid>
  </Grid>
</Container>
person niconiahi    schedule 26.03.2020
comment
Спасибо, @niconiahi, что вы на это взглянули, но у меня это не сработало. ‹Контейнер сетки justify = flex-end› и добавление класса на основе CSS, такого как rowLayout: {display: 'flex', alignItems: 'baseline',}, кажется мне ближе к решению. - person Davis Jones; 26.03.2020

arrow_upward
4
arrow_downward

Я использую это сейчас, и он хорошо работает, чтобы выровнять один крайний левый, а другой крайний правый.

На основе: Как выровнять столбцы Flexbox слева и справа?

const useStyles = makeStyles((theme) => ({
  right: {
    marginLeft: 'auto'
  }
}));

<Grid container alignItems="center">
  <Grid>
    <Typography variant="h4" component="h4">Left</Typography>
  </Grid>
  <Grid className={classes.right}>
    <Button variant="contained" color="primary">Right</Button>
  </Grid>
</Grid>
person Zane    schedule 25.04.2020

arrow_upward
1
arrow_downward

Я использовал другой подход, чтобы расположить один элемент сетки справа. Аналогичный подход можно использовать для отображения элементов сетки справа и одного слева.


<Gird container>
 <Grid item/>                                     //Items to show on left
 .
 .
 .
  <Grid item xs>                                  // Item takes remaining space
   <Grid container direction="row-reverse">       // Item shows on right
    <Grid item><Button> HOLA </Button></Grid>..
   <Grid>
  </Grid>
 </Grid>
person Aayush Sharma    schedule 29.01.2021