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

【问题标题】：How to style the color of the sort icon through a theme override for MUIDataTable?如何通过 MUIDataTable 的主题覆盖来设置排序图标的颜色？
【发布时间】：2019-10-15 08:37:37
【问题描述】：

我需要覆盖MUIDataTable 中排序图标的颜色。我目前基本上能够覆盖除此之外的所有其他内容。

通过调试器视图，我尝试了很多，但似乎无法触摸此图标。

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

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

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

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

排序图标当前是默认颜色（黑色），因为此代码对图标样式没有任何作用。 enter image description here

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

'@global': { 'div > span > svg > path': { 填充：'#eee' },

【问题讨论】：

标签： sorting material-ui styling mui-datatable

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这可能会为你做。

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

【讨论】：

没用。 MUIDataTableHeadCell: { fixedHeader: { color:'#eee', backgroundColor: "#fff", }, sortActive: { color:'#eee', }, sortAction: { '& svg': { color: "#eee" } , }, },
快把我逼疯了 :) 谢谢你的回复！
我们在同一页上，是这个库对吗？ material-ui-datatables.com
还是默认的 Material-UI 表？
是的，我在这样的主题中通过覆盖来调用它 - const getMuiTheme = () => createMuiTheme({ overrides: { MUIDataTableHeadCell: { fixedHeader: { color:'#eee', backgroundColor:" #fff", }, sortActive: { color:'#eee', }, sortAction: { '& svg': { color: "#eee" }, }, },

【解决方案3】：

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

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

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

【讨论】：

你不会碰巧知道如何覆盖搜索区域吗？输入文本的行在聚焦时突出显示蓝色，默认为黑色。我也无法弄清楚这一点。如果没有，我可以发布另一个问题。
我刚刚意识到它没有正确渲染并且这个解决方案似乎不起作用。使用最新版本的 Material ui
您不应该将最新版本的材料 ui 与 mui-datatables 一起使用，因为它们不完全兼容，您可能会遇到问题。我不会比图书馆推荐的 3.5.1 更高。

【解决方案4】：

试试这个对我有用

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

【讨论】：