javascript - 在 TypeScript 中使用 createStyles 来 justifyContent

Question

我有一个工具栏，其中使用了出现在左端的 2 个图标。目前，我正在使用这种样式方法:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight: {
      marginRight: 0,
      right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
    // justifyContent: spaceBetween,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);

我希望图标出现在右端。如果我用它添加一个单独的 css 文件，它就可以工作:

.toolbar-class{
    justify-content:space-between;
    }

但我想在 createStyles 中使用它。 createStyles 中没有“空格”选项。这是我的组件的一部分的样子:

<AppBar position="fixed" className={classes.appBar}>
        <Toolbar className="toolbar-class">
          <Typography variant="h6" noWrap>
            Al
          </Typography>
          <div className="panelheaderRight">
            <NotificationsIcon />
            &nbsp;&nbsp;
            {/* <ExitToAppIcon onClick={() =>
            <ExitToAppIcon onClick={logout}></ExitToAppIcon>
          </div>
        </Toolbar>
      </AppBar>

有什么方法可以使用 createStyles 将图标移动到左侧，而不添加单独的 css 文件吗？

Answer 1

一些注意点:

• 将 justify-content 更改为 justifyContent，并将值设置为字符串。

• 无需将 createStyels 用于 makeStyles

const useStyles = makeStyles((theme: Theme) => ({
  toolBar: {
    justifyContent: 'space-between'
  },
  ...
...

<Toolbar className={classes.toolBar}>