CSS Modules中结合:global与:before覆盖ButtonGroup内按钮样式的正确写法

我在Vite加载的.module.css文件里给按钮类.mybutton定义了:before伪元素样式，通过React组件把这个类应用到MUI的Button组件上。但当按钮处于MUI的ButtonGroup组件中时，ButtonGroup会给按钮加上.MuiButtonGroup-grouped类，我需要覆盖.mybutton的:before样式，但试了多种选择器都失败，只有不含.mybutton的写法能生效，求正确的选择器写法。

初始代码 #

CSS样式（button.module.css） #

.mybutton:before {
  /* 原有样式 */
}

React组件代码 #

import { Button as MuiButton, ButtonProps } from '@mui/material';
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>
}

有效但不符合需求的写法 #

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

这个写法会影响所有ButtonGroup内的按钮，而我只想修改带有.mybutton类的按钮。

失败的尝试 #

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

正确的选择器写法 #

你需要把全局类和本地作用域的类结合，并且注意选择器的层级关系——.MuiButtonGroup-grouped和.mybutton是同一个元素上的类，所以正确的写法有两种：

写法一：

.mybutton:global(.MuiButtonGroup-grouped):before {
  /* 覆盖后的样式 */
}

写法二：

:global(.MuiButtonGroup-grouped).mybutton:before {
  /* 覆盖后的样式 */
}

原因解释 #

• 在CSS Modules中，.mybutton会被编译成带哈希的本地作用域类，而:global()包裹的类会保持原样。
• 因为.MuiButtonGroup-grouped和.mybutton是加在同一个Button元素上的两个类，所以选择器需要表示“同时拥有这两个类的元素的:before伪元素”，而不是父子关系。
• 之前失败的写法要么用了空格（表示父子元素），要么伪元素位置错误，都不符合实际的DOM结构。

内容的提问来源于stack exchange，提问作者MHebes