如何替换 UI Fabric DetailsList 组件中的复选框

Question

如何用普通的方形 CheckBox 组件替换 office-ui-fabric-react 中 DetailsList 的圆形复选框？我看到 onRenderCheckbox 所以我尝试这样的事情：

onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}

或

onRenderCheckbox={(props) => (<Checkbox {...props} />)}

我可以看到方形复选框，但看不到 select。这样做的正确方法是什么？

提前致谢...

Answer 1

当您呈现 Checkbox 组件时，它会自行处理点击（因此它不会渗透到该行，因此它可以相应地切换选择），因此您需要使用 pointer-events: none风格。

onRenderCheckbox(props) {
    return (
        <div style={{ pointerEvents: 'none' }}>
            <Checkbox checked={props.checked} />
        </div>
    );
}

在这里查看：https://codepen.io/anon/pen/zQXEPr

如何替换 UI Fabric DetailsList 组件中的复选框

How to replace the checkbox from the UI Fabric DetailsList component

office-ui-fabric