我是React的新手，我实际上是根据X1 E0 F1 X中的一个建议构建了一个中心有徽标的AppBar

<Box sx={{ display: "flex", alignItems: "center", flex: "1" }}>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        onClick={onDrawerOpen}
        edge="start"
        sx={{ mr: 2, ...(open && { display: "none" }) }}
      >
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" noWrap component="div">
        TITLE
      </Typography>
    </Box>

但是，有没有最好的方法可以像这样为定义之外的这些设置指定单个类或常量

<IconButton class='settings'>

而不是这一切

尝试了@ Dimitry建议的方法，并低于我的代码

export default function AppBar({ open, onDrawerOpen }:any) {
    const theme = useTheme();
    const iconButtonOptions = {
        color: "inherit",
        ariaLabel: "open drawer",
        onClick: onDrawerOpen,
        edge: "start",
        sx: {{ mr: 2, ...(open && { display: "none" }) }}
      }
    return (
        <AppBar position="fixed" style={{ background: "#002a5e" }} open={open}>
        <Toolbar>
            <Box sx={{ display: "flex",flexDirection:"row", alignItems: "center", flex: "1" }}>
            <IconButton {...iconButtonOptions} >
                <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
                TITLE
            </Typography>
            </Box>
            <Box
            component="img"
            sx={{
                height: 32,
            }}
            alt="MyLogo"
            src={logo}
            />
            <Box sx={{ flex: "1" }}></Box>
        </Toolbar>
        </AppBar>
    );
  }

但它说
无法重新声明块范围内的变量“（Missing）”。ts（2451）