Reactjs 如何使用react material ui在js中使用css添加背景剪辑属性

我要做的就是在Reactjs中使用CSS只使用文本剪裁背景

我在react中使用了MaterialUI来设计页面

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles({
    root: {
        minWidth: 275,

    },
    loginCard: {
        width: '100%',
        height: '100vh',
        display: 'grid',
        placeItems: 'center',
    },
    emailInput: {
        margin: '0px 0px 20px 0px'
    },
    actions: {
        padding: '16px'
    },
    submitBtn: {
        marginLeft: 'auto',

    },
    bullet: {
        display: 'inline-block',
        margin: '0 2px',
        transform: 'scale(0.8)',
    },
    title: {
        fontSize: 25,
        textAlign: 'center',
        fontWeight: 'bold',
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        '&::-webkit-background-clip': 'text',
        '&:: -webkit-text-fill-color': 'transparent'
    },
    pos: {
        marginBottom: 12,
    },

})

export default useStyles;

---

如何使用react material UI在js中使用CSS添加背景剪辑属性？

要添加

-webkit背景剪辑

CSS样式，您必须在cssJS中使用

WebkitBackgroundClip

WebkitBackgroundClip

编译成

-webkit背景剪辑

下面是一个在js中仅使用CSS、仅使用文本剪裁背景的工作示例

import React from "react";
import "./styles.css";

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  body:{
    background: 'black',
    textAlign: 'center',
    padding: '120px 20px',
    width:'100vw',
    height:'100vh'
  },
  heading:{
  display: 'inline-block',
  fontSize: '80px',
  lineHeight: 0.9,
  padding: '20px',
  fontFamily: "'Syncopate', sans-serif",
  textTransform: 'uppercase',
  background: 'radial-gradient(circle farthest-corner at center center,white,#111) no-repeat',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent'
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.body}>
      <h1 className={classes.heading}>mega<br/>fancy</h1>
    </div>
  );
}

从“React”导入React；
导入“/styles.css”；
从'@material ui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（（主题）=>({
正文：{
背景：“黑色”，
textAlign:'中心'，
填充：“120px 20px”，
宽度：'100vw'，
高度：'100vh'
},
标题：{
显示：“内联块”，
fontSize:'80px'，
线宽：0.9，
填充：“20px”，
fontFamily:“切分音”，无衬线，
textTransform:'大写'，
背景：“径向梯度（圆心最远的一个角，白色，#111）不重复”，
WebkitBackgroundClip:“文本”，
WebkitTextFillColor:“透明”
}
}));
导出默认函数App（）{
const classes=useStyles（）；
返回(
超级花式
);
}

代码沙盒链接：-