Переопределить параметры стиля React AgGrid с помощью createStyles и withStyles

Question

Я знаю, что можно переопределить свойства Ag Grid, отредактировав сам CSS, однако мне интересно, можно ли использовать вместо этого функциональные возможности, встроенные в реагирование. Я относительно новичок в этих двух системах, поэтому извиняюсь, если есть что-то, чего я не понимаю.

В конечном счете, я хочу сделать что-то вроде этого:

styles.js
---------
const styles = (theme: Theme) =>
  createStyles({
    root: {
      position: 'relative',
      height: 'calc(100vh - 128px)',
    },

    agHeaderCellLabel: {
      agHeaderCellText: {
        writingMode: 'vertical-lr',
        marginTop: '100px',
      },
    },
  })

export default styles

GridComponent.tsx
-----------------

import styles from './styles'
...

return (
    <Paper className={classes.root}>
     <div
          id="myGrid"
          style={{
            height: '100%',
            width: '100%',
          }}
          className={`ag-theme-material ${classes.agHeaderCellLabel}`}
        >
          <AgGridReact
            // listening for events
            onGridReady={onGridReady}
            onRowSelected={onRowSelected}
            onCellClicked={onCellClicked}
            onModelUpdated={calculateRowCount}
            // Data
            columnDefs={cDef}
            defaultColDef={defaultColumnFormat}
            suppressRowClickSelection={true}
            groupSelectsChildren={true}
            debug={true}
            rowSelection="multiple"
            // rowGroupPanelShow={this.state.rowGroupPanelShow}
            enableRangeSelection={true}
            pagination={true}
            rowData={rows}
         />
        </div>
    </Paper>
)
...

export withStyles(styles)(GridComponent)

В этом примере я просто пытаюсь получить текст заголовка, который будет отображаться вертикально.

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

Возможно ли это, и если да, то

Answer 1

Я столкнулся с такой же ситуацией и нашел следующее решение. Хотя это не обязательно идеально , оно позволяет вам продолжить выполнение желаемого соглашения.

styles.js
---------
const styles = (theme: Theme) =>
  createStyles({
    root: {
      position: 'relative',
      height: 'calc(100vh - 128px)',
    },

    //Apply changes to agGrid material HeaderRoot
    myClassAppliedToGrid: {
      '& .ag-header[ref="headerRoot"]':{
        writingMode: 'vertical-lr',
        marginTop: '100px',
      }
    }

   //OR        

   //Apply Changes to agGrid material header row
    myClassAppliedToGrid: {
      '& .ag-header-row':{
        writingMode: 'vertical-lr',
        marginTop: '100px',
      }
    }
  })

export default styles

Основная идея заключается в том, чтобы использовать синтаксис & SASS, чтобы «добраться до» agGrid и создать более конкретные c CSS классы, чтобы вы могли их переопределить. (см. https://css-tricks.com/the-sass-ampersand/ для получения дополнительной информации)

Ключевые сведения:

.parent {
  & .child {}
}

превращается в

.parent .child {}

и

.some-class {
  &.another-class {}
}

превращается в

.some-class.another-class { }

Используя этот Sytanx, вы сможете создавать CSS классы, которые вы можете применять к вашей сетке, столбцам, строкам и т. Д. c правильно переопределит материал ag-grid theme.

Вот еще один пример, но этот класс применяется к ячейке, используя agGrid cellStyleRules, когда над ним перетаскивается строка, а не применяет класс к сетке в целом. Таким образом, он воздействует только на ячейки, у которых происходит перетаскивание строк:

    rowDraggedOverCellsTopEdge: {
        '&.ag-cell': {
            borderTopColor: theme.palette.gray[50],
            borderTopWidth: 8,
            backgroundColor: fade(theme.palette.gray[50], 0.3)
        }
   },

Наконец, одна вещь, которую я не делал, но рекомендовал бы исследовать, - это переопределение темы agGrid, особенно если у вас версия 23 +

https://www.ag-grid.com/javascript-grid-themes-provided/#customising -themes

Это может быть хорошей идеей, чтобы переопределить базовые настройки темы таким образом, если вы ожидаете последовательного внешнего вида ваши сетки на протяжении всего приложения.

Ура!