将 MaterialUI 伪类选择器与 makeStyles 结合使用

问题描述

根据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

解决方法

不知道你是否可以访问伪类“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",0% 0%)","&:hover": {
        backgroundColor: "purple"
      }
    }
  })();