react项目下，mui中的DataGridPro中的baseTooltip插槽怎么使用，请用代码说明

在React项目中，使用mui的DataGridPro组件中的baseTooltip插槽，可以通过以下代码实现：

import { DataGridPro } from '@mui/x-data-grid-pro';

function CustomTooltip(props) {
  const { row, value } = props;
  return (
    <div>
      <p>{`Row ${row.id}: ${value}`}</p>
    </div>
  );
}

export default function App() {
  const columns = [
    { field: 'id', headerName: 'ID', width: 70 },
    { field: 'firstName', headerName: 'First name', width: 130 },
    { field: 'lastName', headerName: 'Last name', width: 130 },
    { field: 'age', headerName: 'Age', type: 'number', width: 90 },
  ];

  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        components={{
          baseTooltip: CustomTooltip,
        }}
      />
    </div>
  );
}

在上述代码中，我们定义了一个CustomTooltip组件作为baseTooltip的插槽，然后将其传递给DataGridPro组件的components属性中。CustomTooltip组件接收row和value两个props，分别表示当前行和当前单元格的值，组件可以根据这些信息自定义tooltip的内容和样式。最后，我们将DataGridPro组件渲染到页面上即可。