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

问题描述

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

标签： javascriptcssreactjsmaterial-uimaterial-design

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

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

问题描述

解决方案

推荐阅读