将 MaterialUI 伪类选择器与 makeStyles 一起使用

Posted 2023-03-16

【中文标题】将 MaterialUI 伪类选择器与 makeStyles 一起使用

【英文标题】：Use MaterialUI pseudo-classes selectors with makeStyles

【发布时间】：2021-09-01 08:59:36

【问题描述】：

根据docs，Material UI在组件处于某种状态时提供了某些伪类，例如selected

我已经尝试过使用这个伪类

  const styles = makeStyles(
    tab: 
      textTransform: "lowercase",
      clipPath: "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)",
      "& :selected": 
        backgroundColor: "purple"
      
    
  )();

//...
          <Tab
            value=s
            label=textToShow(s)
            disabled=disableStep(s)
            className=styles.tab
          ></Tab>

但我无法让selected 选择器工作。

https://codesandbox.io/s/clever-mirzakhani-mhxik?file=/src/SignUp.tsx:1746-1907 上的完整示例

【参考方案1】：

不知道你能不能访问伪类“selected”，如果你查看html，你会发现'Mui-selected'被添加为一个类......

我建议使用 style prop 来设置背景颜色这样

import React,  useState  from "react";

// Styles
//import  signUpStylesHook  from "../styles/ts";

// Components
//import  NavBar, SignUpCard  from "../components";

import  makeStyles  from "@material-ui/core/styles";

// Interface
//import FormInputElement from "../interfaces/FormInputElement";

// Global state management
//import  useStateContext  from "../state/state";

import  Tabs, Tab  from "@material-ui/core";
//import  AnyARecord  from "dns";

function SignUp() 
  const steps = [
    "email_verification",
    "business_information",
    "owner_information",
    "confirmation"
  ];
  const stepText:  [key: string]: string  = 
    email_verification: "e-mail verification",
    business_information: "business information",
    owner_information: "owner information",
    confirmation: "confirmation"
  ;
  const [currentStep, setCurrentStep] = useState<string>("email_verification");
  function textToShow(key: string) 
    return stepText[key];
  

  const styles = makeStyles(
    tab: 
      textTransform: "lowercase",
      clipPath: "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)"
    
  )();

  function changeStep(event: React.ChangeEvent<>, newValue: string) 
    setCurrentStep(newValue);
  

  function disableStep(step: string) 
    return false;
    // return steps.indexOf(currentStep) < steps.indexOf(step)
  

  function content(step: string) 
    if (step === "email_verification") 
      return <>The email verification form</>;
    
    return `You are on the $textToShow(step) tab`;
  

  return (
    <div>
      <Tabs value=currentStep onChange=changeStep>
        steps.map((s) => (
          <Tab
            value=s
            label=textToShow(s)
            disabled=disableStep(s)
            className=styles.tab
            style=s === currentStep ?backgroundColor:'purple':
          ></Tab>
        ))
      </Tabs>
      content(currentStep)
    </div>
  );


export default SignUp;

我不认为 Mui select 像 'hover'、'after' 这样的伪类工作。 我用悬停进行了测试，它可以工作：

 const styles = makeStyles(
    tab: 
      textTransform: "lowercase",
      clipPath: "polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)",
      "&:hover": 
        backgroundColor: "purple"
      
    
  )();

【讨论】：

我不确定这里的思考过程。已显示该类已添加到 html，但解决方案是完全绕过伪类。