向 Material UI 图标添加线性渐变

Question

我已经尝试过这个问题中描述的过程尝试添加线性渐变到武术UI图标作为评论指出它应该工作，但它不适合我。

考虑到图标可能算作文本，我尝试了几种向文本添加渐变的方法，例如：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>
    )
}

更准确地说，这是我试图添加渐变的列表项（这是一个材质图标）：

<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"
    }

PS 我刚刚学习 React，我很可能会错过一些简单的东西。如果您需要更多信息，请告诉我。

Answer 1

以下是使用 Material UI v5 的示例。

图标的 fill 属性链接到线性渐变的id 属性。

import OpenWithIcon from "@material-ui/icons/OpenWith"

const GradientOpenWithIcon = () => (
  <>
    <svg width={0} height={0}>
      <linearGradient id="linearColors" x1={1} y1={0} x2={1} y2={1}>
        <stop offset={0} stopColor="rgba(241,184,74,1)" />
        <stop offset={1} stopColor="rgba(207,113,8,1)" />
      </linearGradient>
    </svg>
    <OpenWithIcon sx={{ fill: "url(#linearColors)" }} />
  </>
)