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

【问题标题】：Material UI, target button variant css selector材质 UI，目标按钮变体 css 选择器
【发布时间】：2021-07-16 05:44:33
【问题描述】：

我创建了 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 不工作

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

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我找到了答案here

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

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

【讨论】：