cssreactjscheckboxfluentui-react

Checkbox size in Fluent UI Northstar

What is the proper way to control the size of checkboxes in Fluent UI Northstar?

I have tried adjusting the font size and the height, but it only acts on the label, not the box itself. And I didn't find anything in the documentation.

enter image description here

Solution

  • If you want this to be a general styling that applies to all checkboxes rendered inside your provider, you can modify the checkbox component-style in the theme you pass into the provider.

    Create your own theme, apply the styles you want and then merge it into the theme that you are currently using

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

    the checkbox rendering issue in the picture is fixed by setting:

    backgroundRepeat: "repeat"