使用 createMuiTheme 方法为 AG Grid React 和 MUI Dialog 中的样式设置相同的主题。

示例代码：

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import { Dialog, DialogContent } from '@material-ui/core';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const customTheme = createMuiTheme({
  overrides: {
    MuiDialog: {
      paper: {
        // 设置 Dialog 的样式
        backgroundColor: '#f0f0f0',
        borderRadius: '10px'
      }
    },
    // 设置 AG Grid 的样式
    MuiTableCell: {
      root: {
        fontSize: '14px',
        lineHeight: '1.5',
        padding: '8px'
      }
    },
    MuiInputBase: {
      input: {
        fontSize: '14px'
      }
    },
    MuiInput: {
      underline: {
        '&:before': {
          borderBottom: '1px solid #ddd'
        }
      }
    }
  }
});

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dialogOpen: false,
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' },
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 },
      ]
    };
  }

  handleToggleDialog = () => {
    this.setState(prevState => ({ dialogOpen: !prevState.dialogOpen }));
  }

  render() {
    const { columnDefs, rowData } = this.state;

    return (
      
        

          Open Dialog