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

问题描述

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

我不确定我是否应该使用& $sizeSmallinside of 之类的东西，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, 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"
      }
    },

标签： cssreactjsmaterial-uijss

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

问题描述

解决方案

推荐阅读