Use MaterialUI pseudo-classes selectors with makeStyles

Question

According to the docs, material UI provides certain pseudo-classes when the component is in a certain state, such as selected

I have tried to make use of this pseudo-class

  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>

but I can't get the selected selector to work.

Full example at https://codesandbox.io/s/clever-mirzakhani-mhxik?file=/src/SignUp.tsx:1746-1907

Answer 1

I don't know if you can access to pseudo-class "selected", If you check the HTML, you'll find that 'Mui-selected' is added as a class...

I suggest using style prop to set the background color like this

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;

I don't think Mui select works as pseudo-classes like 'hover', 'after' .. I did a test with hover and it works:

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