无法使用样式组件设置@mui头像图标的样式

Question

我在处理样式组件，在处理材质ui时遇到了问题。这就是代码：

import React from "react";
import styled from "styled-components";
import ChatIcon from "@mui/icons-material/Chat";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import { Avatar} from "@mui/material";
function Sidebar() {
return (
<Container>
<Header>
<UserAvatar className={"override"} />
<IconsContainer>
<IconButton>
<ChatIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</IconsContainer>
</Header>
</Container>
);
}
export default Sidebar;
const Container = styled.div``;
const Header = styled.div`
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px;
height: 80px;
border-bottom: 1px solid whitesmoke;
`;
const UserAvatar = styled(Avatar)`
height: 60px;
`;
const IconsContainer = styled.div`;

样式化的div运行得很好，但当我从@mui导入"Avatar"并尝试添加一些名为UserAvatar的样式时，它完全忽略了我所写的内容。

Answer 1

我认为有了mui，他们就有了自己的styled版本，用于样式化组件。https://mui.com/system/styled/

看起来他们希望你使用它，而不是样式组件

import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
const CustomButton = styled(Button)({
// your custom styles go here
}) as typeof Button;

参见从import { styled } from '@mui/material/styles';;导入