v9: Override styling of checked state of ToggleButton?

[marpstar]

I'm wondering if there's a way to override the styles of a ToggleButton when checked is true, without having to create some new class and track things myself.

const useStyles = makeStyles({
  button: {
    "width": _buttonWidth,
    "minWidth": _buttonWidth,
    "fontSize": "20px",
    ...shorthands.padding("6px"),
    "alignSelf": "center",
    "--colorSubtleBackgroundSelected": tokens.colorNeutralBackground1,
    "--colorSubtleBackgroundHover": tokens.colorNeutralBackground1Pressed,

    "&:not(:disabled)": {
      color: tokens.colorBrandForeground1
    },

    "&:hover": {
      color: tokens.colorBrandForeground2Hover
    },

    "&:disabled, &:disabled:hover": {
      "&, *": {
        color: tokens.colorNeutralForegroundDisabled
      }
    },
  }
});

Specifically, I want to set the color of my button to my theme's primary color if and only if the button is "checked". Is there some selector I can use to do that?

[tombohub]

@marpstar Hi, I don't think you need to write &:hover use just :hover as per docs: https://griffel.js.org/react/api/make-styles#nesting-selector

This is the example that works strictly for toggled or no toggled, for hover apply extra styling:

import React from "react";
import {
  FluentProvider,
  makeStyles,
  ToggleButton,
} from "@fluentui/react-components";
import { lightTheme } from "./ui/theme";

const useStyles = makeStyles({
  pressed: {
    backgroundColor: lightTheme.colorBrandBackground,
  },
  unpressed: {
    backgroundColor: lightTheme.colorNeutralBackground1,
  },
});

export default function App() {
  const styles = useStyles();

  // Using a state to track the toggle state
  const [isToggled, setIsToggled] = React.useState(false);

  return (
    <FluentProvider theme={lightTheme}>
      <ToggleButton
        className={isToggled ? styles.pressed : styles.unpressed}
        checked={isToggled}
        onClick={() => setIsToggled(!isToggled)}
      >
        Toggle Me
      </ToggleButton>
      {/* Your other content */}
    </FluentProvider>
  );
}