使用 createStyles 和 withStyles 覆盖 React AgGrid 样式设置

Question

我知道可以通过编辑 CSS 本身来覆盖 Ag Grid 属性，但是我想知道是否可以使用内置于 React 中的功能来执行此操作。我对这两个框架比较陌生，所以如果有什么我不理解的地方，我深表歉意。

最终，我想做的是这样的：

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)

在这个例子中，我只是试图让 header 文本垂直显示。

我继承了这个项目，我注意到所有的样式都是用这个方法完成的，因为没有自定义 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 语法用于 "reach into" agGrid 并制作更具体的 CSS classes 以便您可以覆盖它们。（有关详细信息，请参阅 https://css-tricks.com/the-sass-ampersand/）

关键信息是：

.parent {
  & .child {}
}

变成

.parent .child {}

和

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

变成

.some-class.another-class { }

使用此 sytanx，您应该能够创建 CSS classes，您可以将其应用于您的网格、列、行等，这将正确覆盖 material ag -网格主题。

这是另一个示例，但是当将行拖过它时，此 class 会应用到使用 agGrid cellStyleRules 的单元格，而不是将 class 应用到整个网格。这样它只会影响在其上发生行拖动的单元格：

    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

如果您希望整个应用程序中的网格具有一致的外观和感觉，那么以这种方式完成对主题的基本覆盖可能是个好主意。

干杯！

使用 createStyles 和 withStyles 覆盖 React AgGrid 样式设置

Override React AgGrid styling settings using createStyles and withStyles

css

typescript

reactjs

ag-grid