Блог

Что именно я хочу сделать, так это обрезать фон только текстом, используя CSS в Reactjs.

Я использовал пользовательский интерфейс Material для разработки страницы в react.

 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%)',
        'amp;::-webkit-background-clip': 'text',
        'amp;:: -webkit-text-fill-color': 'transparent'
    },
    pos: {
        marginBottom: 12,
    },

})

export default useStyles;
  

как добавить свойство background-clip с помощью CSS в js с использованием пользовательского интерфейса react material?

чтобы добавить -webkit-background-clip стиль css, который вы должны использовать WebkitBackgroundClip в cssJS.

WebkitBackgroundClip компилируется до -webkit-background-clip .
Вот рабочий пример обрезки фона только текстом с использованием только CSS в js

 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>
  );
}

  

ссылка на codesandbox:- https://codesandbox.io/s/competent-poincare-zx3lb