如何将material-ui工具栏拆分为左右部分答案

【问题标题】：How to split material-ui toolbar into left and right part如何将material-ui工具栏拆分为左右部分
【发布时间】：2019-04-08 03:21:34
【问题描述】：

如何将material-ui工具栏分成左右两部分。例如，这是我的工具栏

let EnhancedTableToolbar = props => {
  const { numSelected, classes ,deletefunc} = props;

  return (
    <Toolbar
      className={classNames(classes.root, {
        [classes.highlight]: numSelected > 0,
      })}
    >
      <div className={classes.title}>
        {numSelected > 0 ? (
          <Typography color="inherit" variant="subtitle1">
            {numSelected} selected
          </Typography>
        ) : (
          <Typography variant="h6" id="tableTitle">
            User List
          </Typography>
        )}
      </div>

      <div className={classes.actions}>
        {numSelected > 0 ? (
        <div >

        <div style={{ display: 'inline-block' }}>
          <Tooltip title="Delete">
            <IconButton aria-label="Delete">
              <DeleteIcon onClick={() => { if (window.confirm('Are you sure you wish to delete '+numSelected +' item?')) {deletefunc()} } }>
              </DeleteIcon>
            </IconButton>
          </Tooltip>
        </div>
         <div style={{ display: 'inline-block' }}>
          <Tooltip title="Edit">
            <IconButton aria-label="Edit">
              <EditIcon>
              </EditIcon>
            </IconButton>
          </Tooltip>
            </div>

         </div>


        ) : (
          <Tooltip title="Filter list">
            <IconButton aria-label="Filter list">
              <FilterListIcon />
            </IconButton>
          </Tooltip>
        )}


      </div>
    </Toolbar>
  );
};

我想在工具栏左侧显示 numSelected，在工具栏右侧显示删除按钮和编辑按钮。但是，我的示例输出在 numSelected 旁边显示了删除按钮和编辑按钮。有人有解决这个问题的办法吗？

【问题讨论】：

标签： javascript html reactjs material-ui

【解决方案1】：

解决办法是添加

flex: '0 0 auto'

在我的动作类和一个

<div className={classes.spacer}>

在标题类和动作类之间。

这就是我设置间隔、标题和动作类的方式。

const toolbarStyles = theme => ({
  root: {
    paddingRight: theme.spacing.unit,
  },
  highlight:
    theme.palette.type === 'light'
      ? {
          color: theme.palette.secondary.main,
          backgroundColor: lighten(theme.palette.secondary.light, 0.85),
        }
      : {
          color: theme.palette.text.primary,
          backgroundColor: theme.palette.secondary.dark,
        },
  spacer: {
    flex: '1 1 100%',
  },
  actions: {
    color: theme.palette.text.secondary,
    flex: '0 0 auto',
  },
  title: {
    flex: '0 0 auto',
  },
});

【讨论】：