如何classList.add（）对材料makeStyles css做出反应？答案

【问题标题】：How to classList.add() in react for material makeStyles css?如何classList.add（）对材料makeStyles css做出反应？
【发布时间】：2021-07-21 18:13:05
【问题描述】：

这是我的风格


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

【问题讨论】：

标签： reactjs syntax material-ui

【解决方案1】：

如果对您有帮助，请确保您选择答案。

您可以使用 state 并使用 react 动态添加和删除类。最初，将状态设置为 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 提供了样式。

【讨论】：