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

Question

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

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

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

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

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

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

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

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

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

},

Answer 1

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

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

Answer 2

这可能会为你做。

MUIDataTableHeadCell: {
  sortAction: {
    '& svg': {
      color: "#eee" // or whatever you need
    }
  }
}

Answer 3

要覆盖排序图标颜色，请尝试

overrides: {
  MuiTableSortLabel: {
    active: {
      color: 'green' // your color here
    }
  }
}

如果您一般需要自定义样式覆盖方面的帮助，可以在此处查看示例：https ://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js 。

Answer 4

试试这个它对我有用

MuiTableSortLabel: {
    root: {
        '&$active': {
            color: **<your color>**
            '&& $icon': {
                color: <your color>
            },
        },
    },
},