CSS 模块第三方样式选择器 - 组合 :global 和 :before

Question

我有一个

:before

元素应用于

.module.css

文件中的按钮（由 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>
}

当这个

.mybutton

类是MUI的ButtonGroup的成员时，我想覆盖一些

.mybutton

样式。文档说

.MuiButtonGroup-grouped

类就是我正在寻找的。

为此定义选择器的正确方法是什么？

这有效，但省略了

.mybutton

：

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

以下是我失败的尝试：

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

Answer 1

我是笨蛋

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

拼写是否正确。