将线性渐变添加到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，我可能会错过一些简单的东西。 如果您需要更多信息，请让我知道。

- Brooklyn Welsh

---

您可以请发布一下您的代码吗？ - MCA

@MCA 啊，对不起，刚刚编辑了代码并提供了更清晰的信息，说明我迄今为止尝试了什么。 - Brooklyn Welsh

此外，我知道我的代码结构没有任何问题，因为如果我做一些简单的事情，比如“fill:“blue””或者“background:“blue””，那么图标就会像预期的那样改变。 - Brooklyn Welsh

在SVG填充中使用渐变，需要使用linearGradient。 - Rajiv

这非常有帮助。你尝试过在 @material-ui 提供的其他图标上使用这种方法吗？ - Rajiv

Answer 1

这是一个使用Material UI v5的示例。

图标的填充属性与线性渐变的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)" }} />
  </>
)

- cnotethegr8

---

有时候我不确定为什么，但这个方法只有在某些情况下才能成功使用（当它有效时，效果非常好），但是有一半的时间我的所有图标都只会显示成黑色，刷新页面可以解决这个问题。 - BelgoCanadian