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

Question

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

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

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

Answer 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.

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

Fluent UI - Change checkbox from square to circle

css

reactjs

fluent-ui

fluentui-react