Центрирующая кнопка на очень маленьком экране Material-UI React не работает (justify-xs-center) - PullRequest
Новая
       13

Центрирующая кнопка на очень маленьком экране Material-UI React не работает (justify-xs-center)

0 голосов
/ 19 сентября 2018

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

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

Рабочий код. 

Grid item xs={12}>
  <Grid container justify="center">
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
 </Grid>

Не рабочий код ... 

Grid item xs={12}>
  <Grid container className={"justify-xs-center"}>
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
</Grid>

Я читал документацию по API для GridКак я понимаю, это правильный способ добавить предопределенный класс в компоненте, но эффект, кажется, не работает.Когда я проверяю элемент, хотя класс justify-xs-center находится в компоненте контейнера Grid, как и ожидалось.

Любая помощь приветствуется, спасибо.

1 Ответ

0 голосов
/ 20 сентября 2018

Что ж, похоже, я действительно неправильно понял CSS API Grid.https://material -ui.com / api / grid / # css-api

Мое решение для этого было использовать точки останова, предлагаемые material-ui.https://material -ui.com / layout / breakpoints / # theme-breakpoints-up-key-media-query

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

const styles = theme => ({
  addButtonContainer: {
    [theme.breakpoints.down("xs")]: {
      justifyContent: "center"
    }
  }
});

И это контейнер, который центрируется на очень маленьких экранах 

<Grid item xs={12}>
  <Grid container className={classes.addButtonContainer}>
    <Button color="primary" variant="raised">
      Add Product
    </Button>
  </Grid>
</Grid>
...