Javascript 如何将材质ui工具栏拆分为左右两部分
如何将材质ui工具栏拆分为左右两部分。例如,这是我的工具栏Javascript 如何将材质ui工具栏拆分为左右两部分,javascript,html,reactjs,material-ui,Javascript,Html,Reactjs,Material Ui,如何将材质ui工具栏拆分为左右两部分。例如,这是我的工具栏 let EnhancedTableToolbar = props => { const { numSelected, classes ,deletefunc} = props; return ( <Toolbar className={classNames(classes.root, { [classes.highlight]: numSelected > 0,
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>
);
};
let EnhancedTableToolbar=props=>{
const{numSelected,class,deletefunc}=props;
返回(
0,
})}
>
{numSelected>0(
{numSelected}已选择
) : (
用户列表
)}
{numSelected>0(
{if(window.confirm('是否确实要删除'+numSelected+'项?')){deletefunc()}}>
) : (
)}
);
};
我想在工具栏左侧显示选中的NUM,并在工具栏右侧显示“删除”按钮和“编辑”按钮。然而,我的示例输出显示了delete按钮和edit按钮,就在numSelected旁边。有人对此问题有任何解决方案吗?解决方案是添加
flex: '0 0 auto'
在我的行动课上
<div className={classes.spacer}>
解决办法是添加
flex: '0 0 auto'
在我的行动课上
<div className={classes.spacer}>