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

问题描述

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

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

代码沙箱： 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,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,0.3),inset 0px -1px 1px rgba(95,95,0.4);"
      },track: {
        margin: "auto 16px",height: 8,border: "1px solid #D3D4D5",backgroundColor: "#fafafa",opacity: 1,transition:
          "background-color 300ms cubic-bezier(0.4,0.2,1) 0ms,border 300ms cubic-bezier(0.4,1) 0ms"
      }
    },

解决方法

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

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

,

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