将嵌入样式应用到基于变体的 MUI 组件

如何解决将嵌入样式应用到基于变体的 MUI 组件

我正在尝试根据组件的变体将自定义样式应用于组件。但是，单个组件可以有多个指定不同样式属性的变体。对于这个问题，我将使用 Button 组件中的代码片段。

我的 Material UI Button 组件的包装器（此处定义为 MaterialButton）：

import MaterialButton from '@material-ui/core/Button'
import './button-design-tokens.module.css'

export const Button: React.FC<ButtonProps> = (
  props: ButtonProps
) => {
  return (
      <MaterialButton {...props}>{props.children}</MaterialButton>
  )
}

我正在尝试使用 useStyles() 将以下样式应用于 Storybook 环境中的此组件：

const useStyles = makeStyles({
  contained: {
    backgroundColor: 'var(--mdh-button-background-color)',fontFamily: 'var(--mdh-button-font-family)','&.primary': {
      color: 'var(--mdh-button-secondary-background-color)',},'&.secondary': {
      color: 'var(--mdh-button-secondary-background-color)'
    },'&:hover': {
      backgroundColor: 'var(--mdh-button-hover-background-color)',color: 'var(--mdh-button-hover-text-color)'
    },'&:focus': {
      backgroundColor: 'var(--mdh-button-focus-background-color)',color: 'var(--mdh-button-focus-text-color)'
    },'&$disabled': {
      backgroundColor: 'var(--mdh-button-disabled-background-color)'
    }
  },outlined: {
    borderRightColor: 'var(--mdh-button-background-color)',borderLeftColor: 'var(--mdh-button-background-color)',borderTopColor: 'var(--mdh-button-background-color)',borderBottomColor: 'var(--mdh-button-background-color)','&:hover': {
      borderRightColor: 'var(--mdh-button-hover-background-color)',borderLeftColor: 'var(--mdh-button-hover-background-color)',borderTopColor: 'var(--mdh-button-hover-background-color)',borderBottomColor: 'var(--mdh-button-hover-background-color)'
    },'&:focus': {
      borderRightColor: 'var(--mdh-button-focus-background-color)',borderLeftColor: 'var(--mdh-button-focus-background-color)',borderTopColor: 'var(--mdh-button-focus-background-color)',borderBottomColor: 'var(--mdh-button-focus-background-color)'
    }
  },outlinedPrimary: {
    color: 'var(--mdh-button-background-color)'
  },outlinedSecondary: {
    color: 'var(--mdh-button-secondary-background-color)'
  },textPrimary: {
    color: 'var(--mdh-button-background-color)','&:hover': {
      color: 'var(--mdh-button-disabled-background-color)'
    },'&:focus': {
      color: 'var(--mdh-button-disabled-background-color)'
    }
  },textSecondary: {
    color: 'var(--mdh-button-secondary-background-color)','&:focus': {
      color: 'var(--mdh-button-disabled-background-color)'
    }
  }
})

如您所见，Material UI 按钮具有变体 contained（一个普通按钮）、outlined（一个只有彩色边框的按钮）和 text（一个由仅文本）。反过来，这些变体可以具有 primary、secondary 和 default 变体，它们会更改按钮内文本的颜色。

在 JSON 中看到的 CSS 变量是在 Button 包装器中导入的 css 文件中定义的。该文件包含以下内容：

:root {
  --mdh-button-background-color: rgb(34,123,60);
  --mdh-button-secondary-background-color: #EDBF07;
  --mdh-button-focus-background-color: #9a6f1e;
  --mdh-button-focus-text-color: white;
  --mdh-button-hover-background-color: #9a6f1e;
  --mdh-button-hover-text-color: white;
  --mdh-button-disabled-background-color: #666;
  --mdh-button-font-family: "TheMix",sans-serif;
}

.mdh-button {
  background-color: var(--mdh-button-background-color);
  font-family: var(--mdh-button-font-family);
}

.mdh-button--focus,.mdh-button:focus {
  background-color: var(--mdh-button-focus-background-color);
  color: var(--mdh-button-focus-text-color);
}

.mdh-button--hover,.mdh-button:hover {
  background-color: var(--mdh-button-hover-background-color);
  color: var(--mdh-button-hover-text-color);
}

.mdh-button--disabled {
  background-color: var(--mdh-button-disabled-background-color);
}

如您所见，例如，为了设置 outlined 变体中的 primary 按钮的样式，我必须通过将两个变体组合在一个类名中来设置它的样式（即 { {1}}）。这对于微小的更改来说没有问题，但我正在开发一个基于 MUI 的设计系统，并且必须重新设计我在系统中使用的几乎所有 MUI 组件的样式。这将导致每个组件的样式表都非常臃肿且难以理解。尽管这有效，但我正在尝试一种更紧凑且（以我的拙见）合乎逻辑的方法。它已经在上面的 JSON 中定义，但我将在下面再次强调它：

OutlinedPrimary

contained: { backgroundColor: 'var(--mdh-button-background-color)','&$disabled': { backgroundColor: 'var(--mdh-button-disabled-background-color)' } } 变体在这里被视为 Button 的 primary 变体的“子类”。但是，出于某种原因，Storybook 或 Material UI 都没有发现这一点。我将类应用到组件中，如下所示：

contained

我尝试了各种方法并浏览了无数关于该主题的文章和博客，但都没有变得更明智。有什么我想念的吗？据我所知，语法是正确的。

先谢谢你！