小编mar*_*man的帖子

我正在尝试在AppBar中将文本居中。我试过使用align =“ center”，textAlign =“ center”和style = {{align：“ center”}}等在Typography元素中居中放置文字：

class App extends React.Component {
  render() {
    return (
      <div>
        <AppBar>
          <Toolbar>
            <Typography
              variant="h6"
              color="inherit"
              style={{ align: "center" }}
            >
              Header
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

...但是除非我删除工具栏，否则它是行不通的。但是然后我将不得不手动更改AppBar的高度，但我也没有找到一种方法。另外，我见过的AppBar的每个实例都使用工具栏。我发现可以解决此问题的所有解决方案都已过时，无法正常工作（不再有ToolbarGroup这样的东西）。

我也尝试过使用const样式，并导出AppBar withStyles（）：

const styles = {
  root: {
    flexGrow: 1
  },
  typography: {
    align: "center"
  }
};

function Header(props) {
  const { classes } = props;

  return (
    <div className={classes.root}>
      <AppBar>
        <Toolbar>
          <Typography
            variant="h6"
            color="inherit"
            className={classes.typography} …

我正在创建一个类似于Mini Variant drawer demo的侧边栏，但我的项目指定所有 css 格式必须在单独的 css 文件中完成，而不是在抽屉的 js 文件中（如 material-ui 演示所做的那样）。我已经想出了如何根据演示格式化我的抽屉，但现在我需要弄清楚如何分离 css 并使其可用。

现在抽屉使用默认设置呈现，但除了一个 css 类之外的所有类都无法工作/呈现。只有一个 listItem 可以工作并更改 ListItem 的高度，这很奇怪。所有其他 css 类都不会改变抽屉的外观。

这是非工作版本，其中导入了一个单独的 css 文件：

.root {
    display: flex;
}

.drawerOpen {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    white-space: nowrap; /*text doesn't shrink into side*/
    width: 240;
    transition: width 2s;
}

.drawerClose {
    top: 70px; 
    bottom: 70px;
    position: fixed;
    width: 240;
    overflow-x: hidden; /*hides text when drawer is closed*/
    transition: width 2s;
}

.iconButton {
    margin-top: 15px; …