大佬教程收集整理的这篇文章主要介绍了Material-UI：类不适用于外部 SVG 图标？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我创建了一个 Material-UI 持久抽屉，其中有一个列表项组件，旨在每当用户单击列表项时更改图标颜色。但我的样式仅适用于 Material-UI 图标，不适用于外部 SVG。
这里是同一个项目的代码和框link，以便更好地理解它。
这是我的 AppbarDrawer.Js 父组件，用于呈现我的 ListItem 组件。工作正常，可以忽略
import React from "react";
import cLSX from "cLSX";
import { makeStyles,usetheme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import CSSBaseline from "@material-ui/core/CSSBaseline";
import Appbar from "@material-ui/core/Appbar";
import Toolbar from "@material-ui/core/Toolbar";
import List from "@material-ui/core/List";
import Typography from "@material-ui/core/Typography";
import divIDer from "@material-ui/core/divIDer";
import Iconbutton from "@material-ui/core/Iconbutton";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronleftIcon from "@material-ui/icons/Chevronleft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InBoxIcon from "@material-ui/icons/MovetoInBox";
import Mailicon from "@material-ui/icons/Mail";
import DrawerList from "./components/DrawerList";
const drawerWIDth = 240;
const useStyles = makeStyles((themE) => ({
root: {
display: "flex"
},appbar: {
Transition: theme.Transitions.create(["margin","wIDth"],{
easing: theme.Transitions.easing.sharp,duration: theme.Transitions.duration.leavingScreen
})
},appbarShift: {
wIDth: `calc(100% - ${drawerWIDth}pX)`,marginleft: drawerWIDth,Transition: theme.Transitions.create(["margin",{
easing: theme.Transitions.easing.eaSEOut,duration: theme.Transitions.duration.enteringScreen
})
},menubutton: {
marginRight: theme.spacing(2)
},hIDe: {
display: "none"
},drawer: {
wIDth: drawerWIDth,flexShrink: 0
},drawerPaper: {
wIDth: drawerWIDth
},drawerheader: {
display: "flex",alignItems: "center",padding: theme.spacing(0,1),// necessary for content to be below app bar
...theme.mixins.toolbar,justifyContent: "flex-end"
},content: {
flexGrow: 1,padding: theme.spacing(3),Transition: theme.Transitions.create("margin",duration: theme.Transitions.duration.leavingScreen
}),marginleft: -drawerWIDth
},contentShift: {
Transition: theme.Transitions.create("margin",duration: theme.Transitions.duration.enteringScreen
}),marginleft: 0
}
}));
export default function PersistentDrawerleft() {
const classes = useStyles();
const theme = usetheme();
const [open,setopen] = React.useState(true);
const handleDrawerOpen = () => {
setopen(true);
};
const handleDrawerClose = () => {
setopen(false);
};
return (
<div classname={Classes.root}>
<CSSBaseline />
<Appbar
position="fixed"
classname={CLSX(classes.appbar,{
[classes.appbarShift]: open
})}
>
<Toolbar>
<Iconbutton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
classname={CLSX(classes.menubutton,open && classes.hIDE)}
>
<MenuIcon />
</Iconbutton>
<Typography variant="h6" nowrap>
Persistent drawer
</Typography>
</Toolbar>
</Appbar>
<Drawer
classname={Classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper
}}
>
<div classname={Classes.drawerheader}>
<Iconbutton onClick={handleDrawerClosE}>
{theme.direction === "ltr" ? (
<ChevronleftIcon />
) : (
<ChevronRightIcon />
)}
</Iconbutton>
</div>
<divIDer />
<List>
<DrawerList />
</List>
</Drawer>
<main
classname={CLSX(classes.content,{
[classes.contentShift]: open
})}
>
<div classname={Classes.drawerheader} />
<Typography paragraph>
Lorem Nulla posuere sollicitudin aliquam ultrices sagittis orci a
</Typography>
</main>
</div>
);
}
主文件 DrawerList.Js 没有给出想要的输出
这里真正的问题是我的外部图标颜色没有在我点击它时变成白色，但是最后一个名为 ExitToAppOutlined 的图标是一个 Material-UI 图标并且在点击时工作正常。
import React,{ useState } from "react";
import ListItem from "@material-ui/core/ListItem";
import link from "@material-ui/core/link";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import { ExitToAppOutlined } from "@material-ui/icons";
import ListItemText from "@material-ui/core/ListItemText";
import { useStyles } from "./DrawerListStyle";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import { SvgIcon } from "@material-ui/core";
import { ReactComponent as Appointment } from "../../assets/Appointment.svg";
import { ReactComponent as Customers } from "../../assets/manage customers 2.svg";
const itemList = [
{
text: "Book Appointment",icon: (
<SvgIcon>
{/* external icons as svg */}
<Appointment />
</SvgIcon>
)
},{
text: "Manage",icon: (
<SvgIcon>
{/* external icons as svg */}
<Customers />
</SvgIcon>
)
},{
text: "logout",// Material Icons
icon: <ExitToAppOutlined />
}
];
const DrawerList = () => {
const [SELEctedindex,setSELEctedindex] = useState(0);
const classes = useStyles();
const ListData = () =>
itemList.map((item,indeX) => {
const { text,icon } = item;
return (
<ListItem
button
key={text}
component={link}
SELEcted={index === SELEctedindex}
onClick={(E) => handleListItemClick(e,indeX)}
style={SELEctedindex === index ? { BACkgroundcolor: "#6A2CD8" } : {}}
>
<ListItemIcon
classname={Classes.iconStylE}
style={SELEctedindex === index ? { color: "#fff" } : {}}
>
{icon}
<ListItemText>
<Typography
component="div"
classname={Classes.icontitlE}
style={SELEctedindex === index ? { color: "#fff" } : {}}
>
<Box FontWeight={500} FontSize={13.5}>
{text}
</Box>
</Typography>
</ListItemText>
</ListItemIcon>
</ListItem>
);
});
const handleListItemClick = (e,indeX) => {
setSELEctedindex(indeX);
};
return (
<div classname={Classes.root}>
<ListData />
</div>
);
};
export default DrawerList;
DrawerListStyle.Js 只是一个 styleJs 文件，可以忽略
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((themE) => ({
root: {
margintop: theme.spacing(2)
},iconStyle: {
margin: theme.spacing(0,1,0),color: "#6A2CD8"
},icontitle: {
margin: theme.spacing(0,color: "#555458"
}
}));
export { useStyles };
color 时设置 ListItemIcon 的 ListItem，但因为您的自定义 svg 图标已经设置了 fill 属性到另一种颜色，它会覆盖 MUI 中的 color。修复很简单，使用 fill 在自定义 svg 中再次覆盖 @H_11_8@makeStyles 属性：
const useStyles = makeStyles((themE) => ({
{...}
listItem: {
"&.Mui-SELEcted": {
"& path": {
fill: "white"
}
}
}
}));
<ListItem className={Classes.listItem}
以上是大佬教程为你收集整理的Material-UI：类不适用于外部 SVG 图标？全部内容，希望文章能够帮你解决Material-UI：类不适用于外部 SVG 图标？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。