Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

textStyles defined inside extendTheme aren’t applied correctly

See original GitHub issue

🐛 Bug report

Styles defined via textStyles are not applied correctly although they’re set within extendTheme.

💥 Steps to reproduce

Go to my CodeSandbox
Inspect Heading, Button, Text and the body element with the developer tools inside the browser
Have a look at the styles set by Chakra UI and compare them

textStyles which should be applied

body styles

✅ font-size from textStyles is used. 💥 font-family and line-height aren’t applied by textStyles.

Heading styles

💥 Neither font-family nor font-size and line-height are applied by textStyles.

Button styles

✅ font-family from textStyles is used. 💥 font-size and line-height aren’t applied by textStyles.

Text styles

✅ All styles set by textStyles are used.

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/textstyle-problems-ibu9h?file=/src/App.tsx:176-186

🧐 Expected behavior

Styles like font-family, font-size and line-height defined in textStyles should be applied when passed through extendTheme according to this comment. This behaviour should be consistent and reliable when used on all elements (even <body />).

🧭 Possible Solution

–

🌍 System information

Software	Version(s)
Chakra UI	1.5.2
Browser	Chrome, Firefox
Operating System	macOS

📝 Additional information

–

Issue Analytics

State:
Created 2 years ago
Reactions:8
Comments:16 (3 by maintainers)

Top GitHub Comments

7reactions

bangngo1508commented, Jun 8, 2021

I am facing the same issue with the defaultProps

The defaultProps is not applied at all

3reactions

primos63commented, Oct 28, 2021

The issue was with the precedence order for which I believe I fixed and submitted a PR which has yet to be reviewed. I have no control over that. Workarounds should be temporary.