AgGridReact 行与基本教程示例重叠

Question

我正在使用 AgGridReact 并且网格没有正确显示。行之间存在不必要的间隙，并且网格行之间的线与文本重叠。我正在使用版本一个版本。这是基本的第一个示例。请让我知道如何解决这个问题。此代码 sn-p 与 youtube 教程相同：Youtube Demo ( 3:29 / 7:24 )

"ag-grid-community": "^25.3.0",
“ag-grid-react”：“^18.1.0”，

import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-alpine.css'

function App() {
  const [rowData] = useState([
    {make: "Toyota", model: "Celica", price: 65000},
    {make: "Ford", model: "Mondeo", price: 32000},
    {make: "Porsche", model: "Boxster", price: 72000}
]);
const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
])
  return (
    <div className="ag-theme-alpine" style={{height: 600, width: 600}} >
      <AgGridReact
              rowData={rowData}
              columnDefs={columnDefs}>
      </AgGridReact>

    </div>
  );
}
export default App;

包.json

{
  "name": "my-app-typescript",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^11.0.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.56",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "ag-grid-community": "^25.3.0",
    "ag-grid-react": "^18.1.0",
    "fix": "^0.0.6",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "5.0.1",
    "rxjs": "6.5.5",
    "typescript": "^4.0.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set PORT=3007 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您可以运行示例代码是 plunker。