如何将CardHeader的action组件放置在title标题的紧邻位置

当前实际效果：

问题原因 #

Material UI 中CardHeader组件默认采用flex布局，根容器的justify-content属性为space-between，因此title区域会靠左对齐，action区域会靠右贴边，导致二者距离过远。

可选解决方案 #

方案1：修改CardHeader根容器布局（推荐，不破坏属性语义） #

通过修改CardHeader的布局样式，将元素对齐方式改为左对齐，即可让action元素紧跟在title后方：

// MUI v5+ 版本写法，使用sx属性
<CardHeader
  title="List of Items"
  action={
    <Tooltip
      title={<h3>.....</h3>}
    >
      <IconButton aria-label="help" color="primary" sx={{ ml: 1 }}>
        <HelpIcon />
      </IconButton>
    </Tooltip>
  }
  sx={{
    // 取消默认两端对齐，改为左对齐
    justifyContent: 'flex-start'
  }}
/>

如果是MUI v4版本，使用classes属性修改样式：

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
  headerRoot: {
    justifyContent: 'flex-start'
  },
  actionBtn: {
    marginLeft: 8
  }
})

// 组件内调用
function MyCard() {
  const classes = useStyles()
  return (
    <CardHeader
      title="List of Items"
      action={
        <Tooltip title={<h3>.....</h3>}>
          <IconButton aria-label="help" color="primary" className={classes.actionBtn}>
            <HelpIcon />
          </IconButton>
        </Tooltip>
      }
      classes={{ root: classes.headerRoot }}
    />
  )
}

方案2：将按钮直接整合到title内容中 #

如果不想修改CardHeader的默认布局逻辑，也可以直接把按钮元素放到title属性内，天然实现紧邻排列：

<CardHeader
  title={
    <>
      List of Items
      <Tooltip
        title={<h3>.....</h3>}
      >
        <IconButton aria-label="help" color="primary" sx={{ ml: 1 }}>
          <HelpIcon />
        </IconButton>
      </Tooltip>
    </>
  }
/>

内容的提问来源于stack exchange，提问作者JS3