如何解决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 并有更准确的方法来处理您正在尝试做的事情:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。