React Fluent UI - 更改复选框的选中标记和标签的颜色

Question

我有一个使用 Fluent UI 的 React 应用程序。我正在使用 <Checkbox/> 组件，但它具有默认颜色和行为。像这样：

我想更改勾选标记和标签的颜色（绿色勾选标记和棕色标签）。我尝试了以下方法，但没有用。

const checkBoxStyles = {
  root: {
    color: 'brown'
  },
  checkbox: {
    color:'green'
  }
}
  return (
    <Stack tokens={stackTokens}>
      <Checkbox
        styles={checkBoxStyles}
        label="Controlled checkbox"
        checked={isChecked}
        onChange={onChange}
      />
    </Stack>
  );
};

codepen 的完整工作代码 - https://codepen.io/AnkitSaxena2605/pen/eYyppLj

Answer 1

尝试在您的 checkBoxStyles 中进行以下更改：

 const checkBoxStyles = {
    checkmark: {
      background: 'green',
      color: 'white'
    },
    checkbox: {
      background: 'white',
      borderColor: 'black'
    },
    text: {
      fontWeight: "bold",
      color:'brown'
    }
  };

checkbox 和 checkmark 用于设置复选框样式，text 用于设置标签样式。