Question

这是我的风格


const useStyles = makeStyles({
   button1: {
    border: 0,
    position: 'relative',
    overflow: ' hidden',
    color: '#FFF',
    backgroundColor: '#7768F2',
     '&circle': {
      position: 'absolute',
      backgroundColor: '#dd8164',
      width: '100px',
      height: '100px',
      borderRadius: '48px',
      transform: 'translate(-50%,-50%)',
      animation: 'scale 0.5s ease-out',
     },
  },
  
  '@keyframes scale': {
    to: {
      transform: 'tranlate(-50%,-50%) scale (3)',
      opacity: '0.5',
    },
  },

});


export default useStyles;

这里是我想使用它的地方

import useStyles from './styles';
import React from 'react';
function Landing() {
  const classes = useStyles();

  function onRippleStart(e) {
    const x = e.clientX;
    const y = e.clientY;
    const buttonTop = e.target.offsetTop;
    const buttonLeft = e.target.offsetLeft;
    const xInside = x - buttonLeft;
    const yInside = y - buttonTop;
    const circle = document.createElement('span');
    circle.classList.add(classes.circle);

在这里我想选择 button1 内的圆圈，但创建的跨度一直有一个未定义的类。当我使用 classList.add('circle'); 创建一个类圆而不使用我在样式中定义的圆时，它也不起作用。

使用添加圆的正确语法是什么？类似classList.add(classes.button1.circle);

Answer 1

如果答案对你有帮助，请确保你拉出来。

您可以使用 state 并使用 react 动态添加和删除类。最初，将 state 设置为 false，即：-

const [state,setState]= useState(false);

然后，当您单击按钮时，将状态更改为 true :

const changeStyle =()=>{
setState(true)
}

然后，最后检查将类添加到 div 或其他任何内容的条件。

<div className={"oldClass" state === true ? "newClass" : "" }> Hi coders</div>
<button onClick={changeStyle}>Change CSS</button>

确保您之前在 CSS 中为 newClass 设置了样式。

如何 classList.add() 对材质 makeStyles css 做出反应？

1 个答案:

如果答案对你有帮助，请确保你拉出来。