Как переопределить значки в DataGrid пользовательского интерфейса материала?

Question

Нам нужно настроить большинство значков, используемых в DataGrid, из пользовательского интерфейса материала. Читая очень ограниченную документацию, мы не можем понять, как это сделать.

В документации говорится о слотах (но без объяснения того, как их использовать). Eсть icons собственность, но мы не уверены, IconsOptionsто же, что и слоты. Несмотря на это, мы пробовали следующее:

            <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          icons={{
            ColumnMenuIcon: AcUnit
          }}
          />
      </div>

и следующее:

            <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          ColumnMenuIcon={AcUnit}
          />
      </div>

Но безрезультатно. Мы пробовали использовать <AcUnit/>вместо этого, но без изменений. Пытался прочитать код, но это тоже не помогло ...

Как правильно это сделать? Если это стандартный способ делать что-то в пользовательском интерфейсе React или Material UI, где мы можем найти документацию?

Вот песочница кода .

Answer 1

Вы можете найти это задокументированное здесь: https://material-ui.com/components/data-grid/components/#icons со списком доступных значков для настройки в документации, которую вы отметили . В примере показано использование components prop для настройки значков.

Работает следующий синтаксис:

              <DataGrid
          rows={rows}
          columns={columns}
          pageSize={5}
          disableSelectionOnClick
          components={{
            ColumnMenuIcon: AcUnit
          }}
        />