Search code examples
css-modules

CSS Modules third party style selector - combining :global and :before

I have a :before element applied to my buttons in a .module.css file (loaded by vite):

.mybutton:before {
  /* styles */
}

import { Button as MuiButton, ButtonProps }
import clsx from "clsx";
import styles from "./button.module.css";

export const Button = (props: PropsWithChildren<ButtonProps>) => {
  const { children, className, ...rest } = props;
  return <MuiButton className={clsx(styles.mybutton, className)} {...rest}>{children}</MuiButton>
}

When this .mybutton class is a member of MUI's ButtonGroup, I want to override some of the .mybutton styles. The docs say the .MuiButtonGroup-grouped class is what I'm looking for.

What is the right way to define a selector for this?

This works, but omits the .mybutton:

:global(.MuiButtonGroup-grouped):before { /* snip */ }

The following are my failed attempts:

:global(.MuiButtonGroup-grouped):before .mybutton
:global(.MuiButtonGroup-grouped) .mybutton:before
:global(.MuiButtonGroup-grouped):before .mybutton:before
Solution

  • I'm dumb,

    .global(.MuiButtonGroup-grouped).mybutton:before

    Is the correct spelling.