[英]mui v5: how to overwrite ArrowDownwardIcon in MuiTableCell
i am trying to change the default color of the ArrowDownIcon in a TableCell using global theming like this:我正在尝试使用这样的全局主题更改 TableCell 中 ArrowDownIcon 的默认颜色:
MuiTableSortLabel: {
styleOverrides: {
root: {
'&&.MuiTableSortLabel-icon':{
color:'#fff'
},
'&.Mui-active': {
color: '#787878 !important',
'&&.MuiTableSortLabel-icon': {
color: '#fff'
}
},
'&&.MuiButtonBase-root': {
'&&.Mui-active': {
color: '#fff'
}
}
},
}
}
Problem is, the icon class adquires another class like this: [1]: https://i.stack.imgur.com/lhYW4.png so i tried this approach to override it, just did not work out:问题是,图标 class 像这样获取另一个 class:[1]: https://i.stack.imgur.com/lhYW4.png所以我尝试了这种方法来覆盖它,只是没有成功:
MuiButtonBase: {
styleOverrides: {
root: {
'&&.Mui-active': {
color: '#fff !important',
'&&.MuiTableSortLabel-icon':{
color:'#fff'
}
},
'&&.MuiTableSortLabel-root': {
'&&.Mui-active' : {
'&&.MuiTableSortLabel-icon':{
color: '#fff',
}
},
}
}
},
},
any idea how to solve this?知道如何解决这个问题吗? appreciate any input:)
感谢任何输入:)
The short answer to your question is:对你的问题的简短回答是:
MuiTableSortLabel: {
styleOverrides: {
root: {
"&.Mui-active .MuiTableSortLabel-icon": {
color: "red",
},
},
},
},
The long answer is that it appears that you have a misunderstanding of how the "&" works.长答案是您似乎误解了“&”的工作原理。 The "&" is called the nesting selector , and it represents the element matched by the parent rule.
“&”称为嵌套选择器,代表父规则匹配的元素。 The best way to solidify that statement is probably with a series of examples.
巩固该陈述的最佳方法可能是使用一系列示例。
MuiTableSortLabel: {
styleOverrides: {
root: {
"&": { color: "red" },
"&&": { color: "red" },
},
},
},
// "&" results in a selector of
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root
// "&&" results in the selector duplicating (increasing specificity)
.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root.css-1r3m9rx-MuiButtonBase-root-MuiTableSortLabel-root
So then you might ask what does the following result in?那么您可能会问以下结果是什么?
MuiTableSortLabel: {
styleOverrides: {
root: {
'&.Mui-active': {
color: '#787878 !important',
'&&.MuiTableSortLabel-icon': {
color: '#fff'
}
},
},
},
},
// &.Mui-active becomes the following:
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active
// the nested "&&.MuiTableSortLabel-icon" then does the following
.css-1k750gi-MuiButtonBase-root-MuiTableSortLabel-root.Mui-active.Mui-active.Mui-active.MuiTableSortLabel-icon
Note how the nested usage of "&" changes to become ".MuiActive" because that is the new parent rule.请注意“&”的嵌套用法如何变为“.MuiActive”,因为这是新的父规则。 And duplicating the & results in.Mui-active duplicating as well.
并复制 & 结果 in.Mui-active 复制也是如此。
If you prefer the nested selector like you have in your original question, the following will also work.如果您更喜欢原始问题中的嵌套选择器,则以下内容也将起作用。 The nesting is completely up to your developer preference.
嵌套完全取决于您的开发人员偏好。
MuiTableSortLabel: {
styleOverrides: {
root: {
"&.Mui-active": {
// the leading space is important for this to correctly target the child element
" .MuiTableSortLabel-icon": {
color: "red",
},
},
},
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.