Question

我需要覆盖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” }

}，

Answer 1

这可能会为你做。

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

Answer 2

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

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

如果您通常需要有关自定义样式替代的帮助，则可以在此处查看示例：https://github.com/gregnb/mui-datatables/blob/master/examples/customize-styling/index.js。

Answer 3

根据@ anthony-z回答，此方法有效，只是使用“＆path”而不是“＆svg”：

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

Answer 4

试试这个它对我有用

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

如何通过MUIDataTable的主题替代为排序图标的颜色设置样式？

4 个答案: