Как стилизовать цвет значка сортировки с помощью переопределения темы для 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>
            },
        },
    },
},