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

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

0 голосов
/ 26 марта 2020

Мне очень трудно пытаться добиться чего-то простого с помощью компонента Grid из 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>

Стиль MaterialUI JSS: 

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

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

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

Спасибо миллион,

Дэвис

Ответы [ 2 ]

1 голос
/ 26 марта 2020

Я думаю, что лучшим вариантом здесь является использование 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>
0 голосов
/ 25 апреля 2020

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

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