Style a component's [aria-checked="true"] using Material UI's makeStyle

Question

I have a check box (not a Material-UI checkbox) that I'd like to style using it's aria-checked="true" attribute via makeStyles. I see in the Material-UI docs that you can style pseudo selectors as such:

'&:hover': { /* … */ },

But I haven't been able to make this work for the aria attribute? Is this possible? If so, how?

Answer 1

The syntax for attribute selectors is largely the same as in CSS. & is used to refer to the generated class (classes.myCheckboxStyles in my example below) and then further selectors can be added within the quotes (e.g. "&[aria-checked=true]").

Below is a working example demonstrating the syntax:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  myCheckboxStyles: {
    border: "1px black solid",
    color: "white",
    "&[aria-checked=true]": {
      backgroundColor: "blue"
    }
  }
});
export default function Checkboxes() {
  const classes = useStyles();
  const [checked, setChecked] = React.useState(false);
  return (
    <div>
      <span
        onClick={() => setChecked(!checked)}
        aria-checked={checked}
        className={classes.myCheckboxStyles}
      >
        X
      </span>
    </div>
  );
}