嵌套的 Material UI 主题样式 类
MaterialUI theme styling for nested classes
我正在使用 createMuiTheme
为应用创建主题。我正在使用 material-table,我需要定位到当前排序的 table header 列的这个图标:
在开发者工具中观察它有以下 CSS 个选择器:
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
我怎样才能在 createMuiTheme
object 中做到这一点?
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
当您不确定如何覆盖默认样式时,最好的资源是查看默认样式是如何定义的。浏览器开发人员工具将向您展示最终结果,源代码将向您展示用于生成具有相似特异性的 CSS 的方法。
下面是来自 TableSortLabel 的控制图标颜色的相关代码:
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
您可以对主题覆盖使用非常相似的语法:
const theme = createMuiTheme({
overrides: {
MuiTableSortLabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});
我正在使用 createMuiTheme
为应用创建主题。我正在使用 material-table,我需要定位到当前排序的 table header 列的这个图标:
在开发者工具中观察它有以下 CSS 个选择器:
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
我怎样才能在 createMuiTheme
object 中做到这一点?
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
当您不确定如何覆盖默认样式时,最好的资源是查看默认样式是如何定义的。浏览器开发人员工具将向您展示最终结果,源代码将向您展示用于生成具有相似特异性的 CSS 的方法。
下面是来自 TableSortLabel 的控制图标颜色的相关代码:
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
您可以对主题覆盖使用非常相似的语法:
const theme = createMuiTheme({
overrides: {
MuiTableSortLabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});