css react-data-table-component如何设置复选框的样式？大复选框变小

yshpjwxd 于 2023-07-01 发布在 React

关注(0)|答案(2)|浏览(123)

我在我的项目中使用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

来源：https://stackoverflow.com/questions/72409272/react-data-table-component-how-to-style-checkbox-large-checkboxes-to-small

2条答案

按热度按时间

taor4pac1#

我是如何解决它的：
1.创建一个Checkbox组件，如下所示：

const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =>
   {
    return(
        <>
            <div className="form-check pb-5" style={{ backgroundColor: '' }}>
                <input 
                    type="checkbox"
                    className="form-check-input"
                    style={{ height: '20px', width: '20px' }}
                    ref={ref}
                    onClick={ onClick }
                    {...rest}
                />
                <label className="form-check-label" id="booty-check" />
            </div>
        </>
    )
   })

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

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

展开查看全部

赞(0）回复(0）举报 2023-07-01

fcy6dtqo2#

this is not working
Unexpected Application Error! Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:206785:21) at createFiberFromElement (http://localhost:3000/static/js/bundle.js:206806:19) at reconcileSingleElement (http://localhost:3000/static/js/bundle.js:195897:27) at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:195947:39) at reconcileChildren (http://localhost:3000/static/js/bundle.js:198889:32) at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:199279:7) at updateSimpleMemoComponent (http://localhost:3000/static/js/bundle.js:199116:14) at updateMemoComponent (http://localhost:3000/static/js/bundle.js:198989:18) at beginWork (http://localhost:3000/static/js/bundle.js:201019:20) at beginWork$1 (http://localhost:3000/static/js/bundle.js:205917:18)

赞(0）回复(0）举报 2023-07-01

我来回答

css react-data-table-component如何设置复选框的样式？大复选框变小

2条答案

相关问题

热门标签

最新问答