Text styles or font size not applying to buttons

[alexastef]

I've defined a custom theme with text styles and button variants, but the font size for buttons is ignored unless added inline (this is not a workable solution).

I've tried adding textStyle: button, fontSize: '14px', fontSize: 'sm', 'font-size': '14px' both on the button theme definition and in the global styles constant. No matter what, the font size for button remains 16px, which I believe is Chakra-Ui's 'md' size. Aside from redefining all my font sizes to make 14px 'md', how can my font sizes be applied to my buttons?

[primos63]

Can you please provide the pertinent pieces of code or a CodeSandbox with an example of what you are trying to do?
If you are using textStyles that may not work because of an issue for which I submitted a PR. I can't know that though without seeing an example of what you are trying to do.

[natBizitza]

In my case, size and fontSize don't work when I add sx prop. I use sx prop only to configure colors for a button variant. Hence, I am unsure why size stop working in that case. The documentation about sx prop does not mention anything about that.

const styles = useStyleConfig('Button', { variant: 'customized' });
<Flex flexDir={{ base: 'column', xl: 'row' }} w='100%' gap='1rem' p='1rem 0'> <Button sx={styles} size='xs' w='83px' height='30px' fontSize='12px' ... >.... </Flex>

[natBizitza]

I found that it's a matter of sx priority over the rest of the styles (#3770).
The docs:

Please note that we are passing the styles to the prop __css. It has the same API as the sx prop, but has a lower style priority. This means you can override the style properties with chakra style props.

[Samwakelam]

I am having the same issue and not using the sx prop, however when I apply the _css attribute to the Chakra button there is still no change.

[natBizitza]

Have you tried to pass a variant prop instead? Like this variant='mapMenuButton'

[peterwiebe]

Surprised this is in the discussion area instead of an issue, this problem extends to any other components that use Chakra's button under the hood like <Tab />. Oddly, when using textStyles that define css rules as kebob case, the styles work, but not when they are camel case. Seems like a bug to me.