自定义材料设计数据表复选框答案

【问题标题】：Customize material design datatable checkbox自定义材料设计数据表复选框
【发布时间】：2017-04-06 07:25:15
【问题描述】：

我刚开始在 ReactJS 中使用 Material-ui 设计。我正在努力更改<TableRow /> 组件下显示的复选框样式。 (Table component)

我已经尝试过使用css 来设置复选框的样式。看起来 material-ui 有自己的复选框逻辑，使用 div 和 svg 并隐藏原生 checkbox 元素将不透明度设置为 0。

知道如何实现吗？

【问题讨论】：

标签： css reactjs svg material-design material-ui

【解决方案1】：

没有优雅的方式来自定义可选表格中的复选框。但是，您可以自定义 Checkbox 组件，如带有心形图标等的文档中所示。因此，作为一种解决方法，您可以将 Table 设置为 selectable={false}，并添加您自己的包含自定义 Checkbox 组件的自定义列。然后，如果需要，您必须维护自己的选定状态和全选功能。

【讨论】：

感谢您的解决方案！在我看来，这也是完成它的唯一方法。我正在寻找一种不改变整个逻辑的通用方法。可以给我一个链接，那个带有心脏图标的例子在哪里？
无法从我当前位置获取 URL，但它在 material-ui 的文档中，在组件 -> 开关 -> 复选框中

【解决方案2】：

Material UI 确实做到了这一点。本机复选框元素不接受许多样式属性，因此为了更好看，它使用其他元素。自定义 Material UI 复选框所需要做的就是为这些元素应用样式。

【讨论】：