Разметка компонентов пользовательского интерфейса материала на панели инструментов - PullRequest
Новая
       40

Разметка компонентов пользовательского интерфейса материала на панели инструментов

0 голосов
/ 24 декабря 2018

Я новичок в пользовательском интерфейсе материала и не могу понять, как разместить компоненты Typography на панели инструментов.Я сделал небольшое видео, показывающее мою проблему: https://www.useloom.com/share/f2c391c010c142b4b659d805afe8c825

Кто-нибудь знает, как это сделать?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

В дополнение к ответу Марсона Мао я нашел два других способа решения этой проблемы.

Первый - использовать CSS в JS и добавить класс - следующим образом: 

const styles = {

  grow: {
    flexGrow: 1,
  },
  menuText: {
    marginRight: 18
  }

};

<Typography variant="button" color="inherit" className={classes.menuText}>Home</Typography>

<Typography variant="button" color="inherit" className={classes.menuText}>About </Typography>

<Typography variant="button" color="inherit" className={classes.menuText}>Hire Me</Typography>

Второй вариант заключается в использовании компонента Button вместо компонента Typography - следующим образом: 

<Button variant="text" color="inherit">Home</Button>

<Button variant="text" color="inherit">About </Button>

<Button variant="text" color="inherit">Hire Me</Button>
0 голосов
/ 25 декабря 2018

Самый простой способ: 

<Toolbar>
  <Typography style={{ marginRight: 16 }}>Home</Typography>
  <Typography style={{ marginRight: 16 }}>About</Typography>
  <Typography style={{ marginRight: 16 }}>Hire</Typography>
</Toolbar>
...