我尝试了这个问题描述中的过程 Trying to add linear gradient to a martialUI icon,因为有评论说这应该可以工作,但对我来说并没有。
考虑到图标可能被视为文本,我尝试了几种添加文本渐变的方法,例如这里:https://css-tricks.com/snippets/css/gradient-text/。
然而,我没有成功。渐变色要么显示为在图标前景之前的框状图像,要么根本不显示。有人知道如何将渐变色添加到Material UI图标中吗?
编辑:忘记发布我的代码了,这是相关代码段:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
drawerPaper: {
width: drawerWidth,
backgroundColor:muiTheme.palette.secondary.main
},
drawerContainer: {
overflow: 'auto',
background:muiTheme.palette.secondary.main
},
content: {
flexGrow: 1,
padding: theme.spacing(3),
},
sideBarButton: {
fill: "#FFFFFF",
fontSize: "50px"
}
}));
const SideBar = (props) => {
const classes = useStyles();
return (
<MuiThemeProvider theme={muiTheme}>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Box display="flex" flexDirection="column" padding="0" margin="0" >
<List>
<ListItem button>
<ListItemIcon> <SearchIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
<ListItem button>
<ListItemIcon> <AddCircleIcon className={classes.sideBarButton}/> </ListItemIcon>
<ListItemText/>
</ListItem>
</List>
</Box>
</div>
</Drawer>
</MuiThemeProvider>
)
}
更精确地说,这是我正在尝试添加渐变效果的列表项(它是一个 Material 图标):
<ListItemIcon>
<SearchIcon className{classes.sideBarButton}/>
</ListItemIcon>
这是应用的样式:
sideBarButton: {
background: "linear-gradient(to right, #ad5389, #3c1053)",
fontSize: "50px"
}
我尝试过如上链接中提到的其他方法:
// Just put the style in the tag, doesn't compile
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>
另一种方法:
sideBarButton:{
background: "-webkit-linear-gradient(#eee, #333)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
fontSize: "50px"
}
另一种方法是通过https://fossheim.io/writing/posts/css-text-gradient/ :
sideBarButton:{
/* Create the gradient. */
backgroundImage: "linear-gradient(45deg, #f3ec78, #af4261)",
/* Set the background size and repeat properties. */
backgroundSize: "100%",
backgroundRepeat: "repeat",
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
MozBackgroundClip: "text",
MozTextFillColor: "transparent",
fontSize: "50px"
}
附言:我现在刚开始学习React,我可能会错过一些简单的东西。 如果您需要更多信息,请让我知道。
linearGradient
。 - Rajiv@material-ui
提供的其他图标上使用这种方法吗? - Rajiv