同时使用Jquery和React并不是一个好主意。总的来说，你应该避免让两个东西修改DOM，因为这会增加代码维护的难度和不稳定性（很难说什么在修改什么！）。我认为你可以通过onClick事件和条件类来实现你想做的事情。类似于：

import React, { useState } from "react";
    
    const App = () => {
      const [active, setActive] = useState(false);
    
      return (
        <div className="box">
          <div className={`.MuiFormControlLabel-root ${active ? "active" : ""}`}>
            I am some div
          </div>
          <button onClick={() => setActive(!active)}>Click here!</button>
        </div>
      );
    };

如果你想看看它的实际应用，这里有一个代码：https://codepen.io/Chanodev/pen/gOjmgwa
但是，如果您想走jquery路线，最好的办法是获取不受React操作的DOM的某个部分，如www.example.com中所示https://reactjs.org/docs/integrating-with-other-libraries.html#how-to-approach-the-problem。

import React, {useEffect, useRef} from "react"

    const App = () => {
      const el = useRef(null)
      useEffect(() => {
        //Do stuff with 'el' HTMLElement here. You could also call the 
        //  proposed code here, but manipulating DOM with 
        //  both React and Jquery is a bad idea. 
        /*$(".PrivateSwitchBase-input-6").on('click', function(sss){
                $(".MuiFormControlLabel-root").removeClass("active"); 
            $(this).parents('.MuiFormControlLabel-root').addClass("active");
          }); */
        return () => {
        //Cleanup stuff with 'el'. Destroy jquery listeners. 
    }
      }, [])
      return(
         <div ref={el}>Hello</div>
      );
    }

一些好的链接：

• React状态：https://reactjs.org/docs/hooks-state.html
• 事件处理：https://reactjs.org/docs/handling-events.html
• 条件样式：https://reactjs.org/docs/faq-styling.html