向 Material UI 图标添加线性渐变答案

【问题标题】：Adding a linear gradient to Material UI icon向 Material UI 图标添加线性渐变
【发布时间】：2021-03-24 16:28:37
【问题描述】：

我已经尝试了这个问题Trying to add linear gradient to a martialUI icon 中描述的过程，因为评论说它应该可以工作，但它不适合我。

考虑到图标可能算作文本，我尝试了几种向文本添加渐变的方法，例如：https://css-tricks.com/snippets/css/gradient-text/。

但我还没有得到任何工作。渐变要么显示为前景中的框图像，在图标前面，要么根本不显示。有谁知道如何为 Material UI 图标添加渐变？

编辑：忘记发布我的代码，这是相关的 sn-p：

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

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

【问题讨论】：

你能发布你的代码吗？
@MCA 啊，很抱歉，刚刚用代码和更清晰的信息编辑了我到目前为止所尝试的内容。
具体来说，您想在哪里添加背景颜色或图标颜色的渐变？
@Rajiv 我希望搜索图标的填充是渐变，背景应该是透明的。值得一提的是，我也在我的代码中尝试了“填充：”线性渐变（向右，#ad5389，#3c1053）“，但这也没有影响图标，所以我认为它是无效的反应代码。
另外，我知道我在其他地方的代码结构没有任何问题，因为如果我做一些简单的事情，比如“填充：”蓝色“”或“背景：”蓝色“”，然后图标会按预期更改。

标签： javascript css reactjs material-ui material-design

【解决方案1】：

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

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

【讨论】：