Material-UI 全局覆盖：如何定位内部元素？答案

【问题标题】：Material-UI global overrides: How to target inner elements?Material-UI 全局覆盖：如何定位内部元素？
【发布时间】：2021-03-09 18:48:23
【问题描述】：

我已经为 Material UI 开关创建了一个全局样式，并希望覆盖 track、thumb 等的样式以实现小的变化。我可以使用 sizeSmall 类来定位根元素，但是我认为我在修改内部元素时采用了错误的方法。

我不确定是否应该在track 中使用& $sizeSmall 之类的东西，反之亦然。

代码沙箱： https://codesandbox.io/s/material-demo-forked-vkdsh?file=/theme.js

相关主题覆盖：

MuiSwitch: {
      root: {
        width: 96,
        height: 40,
        padding: 0,
        margin: 8,
        borderRadius: 48,
        boxShadow:
          "inset -3px -3px 7px #FFFFFF, inset 3px 3px 7px rgba(156, 156, 156, 0.48);"
      },
      sizeSmall: {
        width: 60,
        height: 18,
        borderRadius: 9,
        padding: 0
      },
      switchBase: {
        marginTop: 7,
        marginLeft: 12,
        padding: 1,
        "&$checked, &$colorPrimary$checked, &$colorSecondary$checked": {
          transform: "translateX(46px)",
          color: "#fff",
          "& + $track": {
            opacity: 1,
            border: "none",
            background:
              "linear-gradient(172.54deg, #2B8CFF -34.02%, #0354CE 124.23%);"
          }
        }
      },
      thumb: {
        width: 24,
        height: 24,
        boxShadow:
          "2px 1px 8px rgba(185, 185, 185, 0.3), inset 0px -1px 1px rgba(95, 95, 95, 0.4);"
      },
      track: {
        margin: "auto 16px",
        height: 8,
        borderRadius: 9,
        border: "1px solid #D3D4D5",
        backgroundColor: "#fafafa",
        opacity: 1,
        transition:
          "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
      }
    },

【问题讨论】：

请将相关代码粘贴到您的问题中。代码沙箱改变或消失。
我相信代码框已冻结，但我添加了当前主题覆盖和结果图像。

标签： css reactjs material-ui jss

【解决方案1】：

this is CSS 类，其中之一是track，您可以使用它来覆盖，这将完全改变。如果你想定位一个单独的元素，你需要使用 classes 属性并定位 track 类

<Switch classes={{ root: someClass, track: trackClass}}/>

【讨论】：

【解决方案2】：

您可以检查 material-ui 如何处理此 here 并有更准确的方法来了解您正在尝试做的事情:)

【讨论】：