情感对材质 UI 没有影响

Question

我试图在代码中使用情感，但似乎对它没有影响。并且没有错误消息。

我也试过sx，它很管用。

我错过了什么？

import React from "react";
import { css } from "@emotion/react";
import {
AppBar,
Toolbar,
Container,
IconButton,
Box,
Tooltip,
Icon,
Avatar,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/ViewHeadline";
const NavBar = () => {
return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Box
css={css`
margin-left: auto;
`}
>
<Tooltip title="Open Peronal Setting">
<IconButton>
<Avatar>c</Avatar>
</IconButton>
</Tooltip>
</Box>
</Toolbar>
</Container>
</AppBar>
);
};
export default NavBar;

Answer 1

您需要针对要更改的元素，并以正确的方式指定css属性。

看看这个代码沙盒为图标添加margin-right的方式，而不是你拥有它的方式

这是的工作代码

return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{
"&.MuiIconButton-root": {
marginRight: 2
}
}}
>
<MenuIcon />
</IconButton>
<Box>
<Tooltip title="Open Peronal Setting">
<IconButton>
<Avatar>c</Avatar>
</IconButton>
</Tooltip>
</Box>
</Toolbar>
</Container>
</AppBar>
);