Как я могу центрировать что-то в интерфейсе материалов? - PullRequest
Новая
       4

Как я могу центрировать что-то в интерфейсе материалов?

0 голосов
/ 23 мая 2019

Итак, у меня есть компонент AppBar для моего заголовка, и я хотел бы центрировать заголовок в AppBar.Как вы видите, у меня будет кнопка слева и кнопка справа.Мне бы эти кнопки обнимали слева и справа соответственно.

const styles = {
  root: {
    flexGrow: 1
  }
};

class Header extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <LeftButton />
            <Typography variant="h4" color="inherit">
              Title
            </Typography>
            <RightButton />
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

Каким будет подход к центру заголовка?

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

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

1 Ответ

0 голосов
/ 23 мая 2019

вы можете использовать withStyles(), который экспортируется MaterialUI, чтобы добавить CSS в компоненты.

И у них есть пример, который делает AppBar , я думаю, это поможет!что я редактирую и делаю this .

В исходном коде, в классе 'grow', я удаляю flexGrow: 1 и помещаю margin: "auto"

...