Ag Grid React checkboxSelection: true 在使用打字稿时不允许选择/取消选择行

Question

我是 Ag 网格的新手，想创建一个带有复选框选择的表格结构。这就是我使用 Ag grid React 创建表的方式

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';

export const GridExample = () => {
    const data = {
        columnDefs: [
            {
                headerName: 'Athlete',
                field: 'athlete',
                minWidth: 180,
                headerCheckboxSelection: true,
                checkboxSelection: true,
            },
            { field: 'age' },
            {
                field: 'country',
                minWidth: 150,
            },
            { field: 'year' },
            {
                field: 'date',
                minWidth: 150,
            },
            {
                field: 'sport',
                minWidth: 150,
            },
            { field: 'gold' },
            { field: 'silver' },
            { field: 'bronze' },
            { field: 'total' },
        ],
        defaultColDef: {
            flex: 1,
            minWidth: 100,
            resizable: true,
        },
        rowSelection: 'multiple',
        rowData: [],
    };
    const [columnData, setColumnData] = useState(data.columnDefs)
    const [rowData, setRowData] = useState(data.rowData)
    const [defaultColData, setDefaultColData] = useState(data.defaultColDef)
    const [rowSelection, setRowSelection] = useState(data.rowSelection)


    const onGridReady = (params: any) => {
        const httpRequest = new XMLHttpRequest();
        const updateData = (data: any) => {
            setRowData(data);
        };

        httpRequest.open(
            'GET',
            'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinnersSmall.json'
        );
        httpRequest.send();
        httpRequest.onreadystatechange = () => {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                updateData(JSON.parse(httpRequest.responseText));
            }
        };
    };

        return (
                    <div id="myGrid" style={{
                            height: 1000,
                            width: 1000,
                        marginLeft: 100
                        }}
                        className="ag-theme-alpine"
                    >
                        <AgGridReact
                            columnDefs={columnData}
                            defaultColDef={defaultColData}
                            suppressRowClickSelection={true}
                            rowSelection={rowSelection}
                            onGridReady={onGridReady}
                            rowData={rowData}
                        />
                    </div>
        );
}

我希望我的第一列有复选框，单击我应该能够选择/取消选择行。使用上面的代码，我可以在第一列中看到复选框，当我点击它时，它会被点击，但复选框的状态在 UI 中没有改变，行也没有被选中。我在这里缺少的任何东西。

我发现如果我们不使用 typescript 但不适用于 ag-grid-react + typescript，则上面的示例效果很好。

Answer 1

误报：复选框的一些全局 CSS 限制我这样做。将全局 css 修复为特定的 css 即可解决此问题。