Fluent UI - 将复选框从方形更改为圆形

【问题标题】：Fluent UI - Change checkbox from square to circleFluent UI - 将复选框从方形更改为圆形
【发布时间】：2021-11-19 13:45:53
【问题描述】：

我需要将 Fluent UI 中的复选框输入从正方形更改为圆形。我希望复选框看起来像 DetailsList 中使用的复选框。我已经想出了如何更改复选标记，但我无法使用类型复选框更改输入。

这是我更改复选标记的方式。我希望它与输入相同，但它不起作用。

<Checkbox checkmarkIconProps={{ iconName: "StatusCircleCheckmark" }} inputProps={{ iconProps: "CircleRing" }}/>

【问题讨论】：

<input type="radio"> ?

标签： css reactjs fluent-ui fluentui-react

【解决方案1】：

您可以通过 styles 和 checkbox 道具更改它：

<Checkbox
  styles={{ checkbox: { borderRadius: '100%' } }}
/>

7 月 的解决方案：

const checkStyles = {
  checkbox: { 
    borderRadius: "100%",
    height: "17px",
    width: "17px"
  }, 
  checkmark: {
    fontSize: "16px",
    position: "absolute",
    top: "-1px",
    width: "17px",
    height: "15px",
    textAlign: "center",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    verticalAlign: "middle",
    left: "0.2px"
  }
};

<Checkbox
  className="cardcheckbox"
  styles={checkStyles}
  checkmarkIconProps={{ iconName: "StatusCircleCheckmark" }}
  onChange={handleCheckboxAllChange}
  checked={checked}
/>

Codepen working example.

【讨论】：