Fluent UI Northstar 中的复选框大小答案

【问题标题】：Checkbox size in Fluent UI NorthstarFluent UI Northstar 中的复选框大小
【发布时间】：2021-05-14 16:45:37
【问题描述】：

在 Fluent UI Northstar 中控制复选框大小的正确方法是什么？

我试过调整字体大小和高度，但它只作用于标签，而不是盒子本身。我在documentation 中没有找到任何东西。

【问题讨论】：

标签： css reactjs checkbox fluentui-react

【解决方案1】：

如果您希望这是适用于提供程序内呈现的所有复选框的通用样式，您可以在传递给提供程序的主题中修改复选框组件样式。

创建您自己的主题，应用您想要的样式，然后将其合并到您当前使用的主题中

Code snippet

import { Provider, teamsTheme, mergeThemes, ThemeInput } from '@fluentui/react-northstar';
const myTheme: ThemeInput = {
componentStyles: {
    Checkbox: {
        root: {
            //will apply styles to the root-container component
        },
        checkbox: {
            backgroundRepeat: "repeat",
        },
        label: {
            //will apply styles to the label
        },
    }
}}

ReactDOM.render(
    <Provider theme={mergeThemes(teamsTheme, myTheme)}>           
        <AppContainer>
            <Component title={title} isOfficeInitialized={isOfficeInitialized} />
        </AppContainer>
    </Provider>,
    document.getElementById('container')
);

图片中的复选框渲染问题通过设置修复：

背景重复：“重复”

【讨论】：