时间戳

首页 > 解决方案 > 如何通过 MUIDataTable 的主题覆盖来设置排序图标的颜色？

sorting - 如何通过 MUIDataTable 的主题覆盖来设置排序图标的颜色？

问题描述

我需要覆盖MUIDataTable. 我目前基本上能够覆盖除此之外的所有其他内容。

通过调试器视图，我已经尝试了很多，似乎无法触及这个图标。

这就是我目前正在尝试调用的内容

MuiTableSortLabel: {
  icon: {
    color: "#eee",
  },
  iconDirectionAsc: {
    color: "#eee",
  },
  iconDirectionDesc: {
    color: "#eee",
  },
},

我在覆盖范围内也有这个调用 -

MuiSvgIcon: {
  root: {
    color: "#eee",
  },
},

排序图标当前是默认颜色（黑色），因为此代码对图标的样式没有任何作用。 在此处输入图像描述

更新解决方法：这不满足覆盖但在样式中调用-

'@global': { 'div > span > svg > path': { fill: '#eee' },

},

标签： sortingmaterial-uistylingmui-datatable

解决方案

基于@anthony-z 的回答，这行得通，只是“& path”而不是“& svg”：

const StyledTableSortLabel = withStyles(theme => ({
    icon: {
        backgroundColor: grey[500],
        '& path': {
            fill: '#eee'
        },
    }
}))(TableSortLabel)

推荐阅读