材质 UI，目标按钮变体 css 选择器

Question

我创建了 3 个类，为每种类型的材质 UI 按钮变体应用渐变。这些类是：gradient、outlinedGradient 和 containedGradient、

但我只想创建一个类 gradient，然后在按钮是 Material UI 的默认按钮、轮廓按钮或包含按钮时创建更具体的选择器，这样我就不必手动更改渐变类我更改了按钮样式。

我尝试使用选择器 "& .MuiButton-contained": 和 & .MuiButton-outlined，但没有应用样式。

不工作：

const styles = (theme) => ({
  root: {
    padding: theme.spacing.unit
  },
  button: { margin: theme.spacing.unit },
  gradient: {
    background: theme.palette.primary.mainGradient,
    "-webkitBackgroundClip": "text",
    "-webkitTextFillColor": "transparent",
    "& .MuiButton-contained": {
      "-webkitBackgroundClip": "unset",
      "-webkitTextFillColor": "black"
    },
   "& .MuiButton-outlined": {
     ...more styles
    }
  }
});

代码沙盒：

• 3 classes 工作
• 1 class 不工作

可以这样做吗？要在 Material UI 的 css 中定位这些按钮变体？

Answer 1

我找到了答案here

<块引用>

您正在使用后代选择器引用 CSS 类，但 MuiButtonBase-root 位于根元素上（即样式组件类名称将应用于的同一元素），因此适当的语法是 &.MuiButtonBase-root （没有＆符号后面的空格）。

我只需要省略选择器中的空格 "&.MuiButton-contained" 而不是 "& .MuiButton-contained"