office-ui-fabric-react: How to change a theme's default font to be smaller

Question

The default font is a bit large for my target application.

I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?

IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?

I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.

The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.

Answer 1

loadTheme可以覆盖font-szie。