javascript - 向 Material UI 图标添加线性渐变

Question

我已经尝试过这个问题中描述的过程 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，我很可能错过了一些简单的东西。如果您需要更多信息，请告诉我。

Answer 1

这是一个使用 Material UI v5 的示例。
图标的填充属性链接到 linear gradient's 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)" }} />
  </>
)