react-data-table-component 如何设置复选框样式？大复选框到小答案

【问题标题】：react-data-table-component How To Style Checkbox? Large Checkboxes To Smallreact-data-table-component 如何设置复选框样式？大复选框到小
【发布时间】：2022-06-21 14:53:56
【问题描述】：

我在我的项目中使用react-data-table-component 来创建数据表。

但是，复选框看起来太大了。

查看文档后，我找到了这个页面 - Overidding Styling Using css-in-js with customStyles，以及这个例子：

//  Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
    rows: {
        style: {
            minHeight: '72px', // override the row height
        },
    },
    headCells: {
        style: {
            paddingLeft: '8px', // override the cell padding for head cells
            paddingRight: '8px',
        },
    },
    cells: {
        style: {
            paddingLeft: '8px', // override the cell padding for data cells
            paddingRight: '8px',
        },
    },
};

那里没有提到复选框样式，所以我尝试这样做：

    const customStyles = {
        checkbox: {
            style: {
                maxHeight: '18px',
                maxWidth: '18px',
            },
        },
  
    };

不幸的是，复选框仍然很大。

我该如何解决这个问题，以使复选框的大小与屏幕截图中示例中显示的大小一样？

截图。

【问题讨论】：

标签： css reactjs checkbox css-in-js react-data-table-component

【解决方案1】：

我是这样解决的：

创建一个 Checkbox 组件，如下所示：

   const Checkbox = () =>
   {
    return(
        <>
            <input 
                type="checkbox"
                className="form-control"
                style={{ height: '20px', width: '20px' }}
            />
        </>
    )
   }

将 Checkbox 组件添加到 DataTable，如下所示：


                <DataTable
                    title="Products"
                    columns={columns}
                    data={ data }
                    subHeader
                    subHeaderComponent={subHeaderComponentMemo}
                    onRowClicked={ handleRowClicked }
                    selectableRows
                    selectableRowsComponent={Checkbox} // Pass the Checkbox component only
                    responsive
                    persistTableHead
                />

【讨论】：