How to change Button font-size in the theme?

[hornetDC]

Hi. I can't figure out how to change the default (14px) button size in the theme.

const buttonStyles: IButtonStyles = {
  root: {
    borderRadius: 4,
    fontSize: "16px", // doesn't work
  },
  label: {
    fontWeight: "16px", // doesn't work
  },
};

const fluent: PartialTheme = {
  defaultFontStyle: { fontFamily: "Source Sans Pro" },
  components: {
    DefaultButton: {
      styles: buttonStyles,
    },
  },
};

[khmakoto]

Hey @hornetDC, something like what you are doing should work. You can see it working in this codesandbox.

Let us know if there is anything else we can do to help.

[hornetDC]

You are right, seems something else is overriding my button. We use our own ui library built on top of fluent, button from our lib has a different root-xxx class.

[khmakoto]

That last number is auto-generated by our styling+theming library, so I wouldn't say that it necessarily means that you don't have it. However, if you were expecting the styles for those 2 buttons to be the same, then there is something definitely overriding at least one of those.

[hornetDC]

Button from our library has a font override of it's own, mystery solved. Thanks!

[khmakoto]

No prob! Glad you could track that down!