Я смотрел на свойства CSS по умолчанию, создаваемые каждым компонентом.Основная цель Панель инструментов состоит в том, чтобы отображать ее дочерние элементы с помощью встроенного дисплея (элементы располагаются рядом друг с другом), чего не может Панель инструментов .Компонент AppBar использует отображение : flex и flex-direction: column , что означает, что прямые потомки накладываются друг на друга.С другой стороны, Панель инструментов использует display: flex тоже, но не устанавливает flex-direction , что означает, что он использует значение по умолчанию: row.При этом компонент Button использует отображение : inline-block .Вот почему элементы располагаются рядом друг с другом внутри Панели инструментов компонентов.
Допустим, например, у нас есть Панель инструментов с Панель инструментов с двумя кнопками s как дочерние:
<AppBar>
<Toolbar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</Toolbar>
</AppBar>
Результат этого кода показан здесь
Но, если мы удалим Панель инструментов и поместите кнопку s непосредственно под AppBar :
<AppBar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</AppBar>
результат будет очень разным (показано здесь ), поскольку теперь кнопки являются прямыми потомками компонента AppBar , поэтому они будут накладываться друг на друга.
Как видите, AppBar и Панель инструментов имеют разные цели.Вот почему я думаю, Панель инструментов никогда не исчезнет.