您如何設置自定義數據網格工具欄項的樣式？

Question

我有這個帶有 2 個自定義按鈕和 3 個導入的材料數據網格工具欄組件的工具欄，我希望它們匹配，但最好將材料 styles 應用於我的自定義組件，但我在他們的文檔中的任何地方都找不到它們的樣式導入。 但無論如何我能讓他們匹配將是巨大的。 有人有什么建議嗎？

 const Toolbar = () => { return ( <GridToolbarContainer> <div className={classes.toolbar} onClick={() => { toggleSearch(); }} > <SearchIcon /> <p>SEARCH</p> </div> <div className={classes.toolbar} onClick={() => { bookmarkCases(selectedRows); }} > <BookmarkBorderIcon /> <p>SAVE CASES</p> </div> <GridColumnsToolbarButton /> <GridDensitySelector /> <GridToolbarExport /> </GridToolbarContainer> ); };

Answer 1

與其在<div>中制作圖標按鈕，不如在 MUI <Button />中使用startIcon道具，例如

由此：

<div
 className={classes.toolbar}
 onClick={() => {toggleSearch()}}
 >
 <SearchIcon />
 <p>SEARCH</p>
</div>

對此：

<Button
  className={classes.toolbar}
  onClick={() => {toggleSearch()}}
  startIcon={<SearchIcon />}
 >Search
</Button>

所有 styles 都應該匹配，因為 MUI DataGrid 工具欄按鈕只是 MUI 按鈕

Answer 2

經過一番掙扎，我找到了解決方案。 通過將 styles 通過 DataGrid 本身，我能夠為所有工具欄按鈕實現一致的樣式。

  export const StyledDataDrid = styled(DataGridPremium)<DataGridPremiumProps>(({ theme }) => ({
  '& .MuiDataGrid-toolbarContainer': {
    '& .MuiButton-text': {
      fontSize: '16px !important',
      color: '#074682',
    },
    '& .MuiBadge-badge': {
      backgroundColor: '#074682',
    },
  },
}));

或者您可以使用 sx 屬性在 DataGrid 組件上設置樣式，如本期所述： https://github.com/mui/mui-x/issues/3686#issuecomment-1018469717