Как перезаписать значок ArrowDownwardIcon в React material ui 1.2 TableSortLabel

Question

В настоящее время я работаю над веб-приложением с использованием новейшего пользовательского интерфейса, следил за официальным демонстрационным сайтом https://material -ui.com / demos / tables / , используя пример: сортировка и выбор, успешно добавленная сортировкафункция в таблице.Далее я пытаюсь переписать значок сортировки в столбце заголовка ArrowDownwardIcon из исходного кода TableSortLabel на github https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableSortLabel/TableSortLabel.js.

Новый значок может быть «ArrowDropDownIcon», который используется в «Выбрать».'component (https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Select/Select.js) или просто внешний значок.

рис. ссылка: исходный значок сортировки

до

ссылка на картинку: что я хочу использовать

Кто-нибудь может мне помочь?

версия: "@ material-ui / core": "^ 1.2.0", "@material-ui / icons ":" ^ 1.1.0 ",

Answer 1

Я думаю, вы просто выбираете компонент следующим образом:

<TableSortLabel
  active={true} // do some validation to decide where the icon will be displayed
  direction={'asc'} // hardcoded for now
  onClick={(e: any) => {console.log("e: ", e);}}
  IconComponent={MailIcon} // <<<<<< This is what you are looking for. OR other icon, this will only show up when active is true
>
label
</TableSortLabel>