css - Fluent UI Northstar 中的复选框大小

Question

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

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

Answer 1

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

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

代码片段

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')
);

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

背景重复：“重复”