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

Question

根据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 上的完整示例

Answer 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"
      }
    }
  })();