textStyles defined inside extendTheme aren’t applied correctly #3884

rastersysteme · 2021-04-22T08:55:48Z

🐛 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

–

The text was updated successfully, but these errors were encountered:

stale · 2021-06-02T17:02:46Z

Hi!
This issue hasn't seen any activity recently. We close inactive issues after 35 days to manage the volume of issues we receive.
If we missed this issue or you want to keep it open, please reply here. That will reset the timer and allow more time for this issue to be addressed before it is closed.

tbaschim · 2021-06-02T21:38:49Z

Bump

…

On 2 Jun 2021, 19:03 +0200, stale[bot] , wrote: Hi! This issue hasn't seen any activity recently. We close inactive issues after 35 days to manage the volume of issues we receive. If we missed this issue or you want to keep it open, please reply here. That will reset the timer and allow more time for this issue to be addressed before it is closed. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

bangngo1508 · 2021-06-08T09:09:36Z

I am facing the same issue with the defaultProps

The defaultProps is not applied at all

rastersysteme · 2021-06-10T07:20:24Z

Tested it with the latest version 1.6.3, still the same problem. Sadly, at the moment textStyles aren’t usable.

crimson-med · 2021-06-24T04:16:20Z

Any updates on this?
I'm trying to customize StatHelperText and it is working on old version 1.1.2 of chakra but the recent 1.6.4 not working.

<StatHelpText textStyle="h1" >
    <StatArrow type="increase" /> 10%
</StatHelpText>

Variant and defaultProps with StatHelpText, StatNumber are also not working

rastersysteme · 2021-07-14T06:21:04Z

Bump – I really would love to see a solution for this.

stephane-ruhlmann · 2021-07-20T13:51:25Z

Same, can't manage to have fontSize defined in textStyle work with <Heading/> since I updated to 1.6.5.
Worked fine with version 1.1.6.

Here's a narrowed down example in CodeSandbox

color appears to be applied but not fontSize

textStyles are defined as:

const customTheme = extendTheme({
  textStyles: {
    h1: {
      fontSize: "32px",
      color: "blue",
    },
    h2: {
      fontSize: "24px",
      color: "red",
    },
    h3: {
      fontSize: "16px",
      color: "orange",
    }
  }
});

And used this way:

<VStack spacing="8px">
      <Heading as="h1" textStyle="h1">
        Heading 1
      </Heading>
      <Heading as="h2" textStyle="h2">
        Heading 2
      </Heading>
      <Heading as="h3" textStyle="h3">
        Heading 3
      </Heading>
</VStack>

stephane-ruhlmann · 2021-07-20T14:00:07Z

After some further investigation it looks like we should be using theme variants for components such as <Heading/> as suggested there #3501 (comment)

rastersysteme · 2021-07-20T17:02:41Z

After some further investigation it looks like we should be using theme variants for components such as <Heading/> as suggested there #3501 (comment)

Sadly this doesn’t tackle the base problem – just have a look for example at my initial sandbox where I applied textStyle on body. And even inside the variants it won’t work.

To cite the documentation:

The text styles functionality in Chakra makes it easy to repeatably apply a collection of text properties (like line height and size) to any component.

So as described I just want to be able to apply my pre-definied textStyle definitions (which are all saved in one single file) to any component as I did prior to V1.4. This isn’t possible at the moment.

stephane-ruhlmann · 2021-07-20T17:29:49Z

After some further investigation it looks like we should be using theme variants for components such as <Heading/> as suggested there #3501 (comment)

Sadly this doesn’t tackle the base problem – just have a look for example at my initial sandbox where I applied textStyle on body. And even inside the variants it won’t work.

To cite the documentation:

The text styles functionality in Chakra makes it easy to repeatably apply a collection of text properties (like line height and size) to any component.

So as described I just want to be able to apply my pre-definied textStyle definitions (which are all saved in one single file) to any component as I did prior to V1.4. This isn’t possible at the moment.

Yes, this is definitely a bug as it should work as stated in the documentation. Should have made it clear in my prior comment.

The suggestion is a workaround that might not work for everywhere but as it appears to be a complex issue on chakra's side that's all we can do for now. I hope they can fix it in an upcoming release as it's not a satisfying solution.

primos63 · 2021-08-25T15:08:54Z

This issue occurs with both text and layer styles. It's possible it occurs with apply also. The reason for this is priority is currently given to attributes which exist in the theme. For Text it works because there is no theme source for it. Heading has all three attributes defined in it's theme source and Button has lineHeight and fontSize. body has fontFamily and lineHeight defined in the default global theme setting (packages/theme/src/style.ts).

I'm not sure why priority was given to the theme. It would seem that what is specified in the JSX would have a higher precedence. If you were to specify the attributes separately in JSX, <Heading textStyle="h1" fontSize={128}>...</Heading>, fontSize takes precedence over what's defined in the theme for Heading.

I can remove the style lookup, but I'm not sure what the thinking was at the time. There are no comments in the code nor is there anything in the documentation about theme styles having precedence over text and layer styles.

** Update **
I found the PR which caused this issue.

ddkang · 2021-10-13T23:23:18Z

Any word on this? It looks like there's an umerged PR aiming to fix this.

heydoughenrique · 2021-10-27T15:53:56Z

Guys, and if you adopt managing those text styles with global settings instead textStyles?

Instead of using:

<Box>
      <Heading as="h1" textStyle="h1">
        Heading 1
      </Heading>
</Box>

and

const customTheme = extendTheme({
  textStyles: {
    h1: {
      fontSize: "24px",
    },
  }
});

Try it:

<Box>
      <Heading as="h1">
        Heading 1
      </Heading>
</Box>

const customTheme = extendTheme({
    styles: {
        global: {   
            // textStyles
            h1: {
                fontSize: "24px",
            },
        }
    },
})

Share with me if it works.

Thank you!

primos63 · 2021-10-27T18:56:45Z

@stridesdigital That defeats the purpose of Text and Layer Styles. You don't get the same advantage using global styles. One can define a style with h1 having a font-size of 24px and another style where h1 has a font-size of 48px. Using global styles the h1 can only exist once.

heydoughenrique · 2021-10-27T20:34:43Z

@primos63 Preserving font style properties through your project makes it easier to maintain and make it more consistent.

But, if you really need to change a specific text style, instead of facing a Chakra UI bug (topic related) by using textStyle, you can customize your extended theme.

Instead of using this:

const customTheme = extendTheme({
    styles: {
        global: {   
            // textStyles
            h1: {
                fontSize: "24px",
            },
        }
    },
})

You can try this:

import { HeadingStyles as Heading } from './styles/heading'

export const customTheme = extendTheme({

    components: {
        Heading,
    },

    styles: {
        global: {
            // textStyles
            h1: {
                fontSize: Heading.sizes['2xl'].fontSize,
                fontWeight: Heading.variants.fontWeight.bold,
            },
        }
    },
})

Your HeadingStyles will look like that:

export const HeadingStyles = {

    baseStyle: {
        fontFamily: "heading",
        fontWeight: "",  // make sure it's empty
    },
    // styles for different sizes ("sm", "md", "lg")
    sizes: {
        "5xl": {
            fontSize: "128px",
        },
        "4xl": {
            fontSize: "96px",
        },
        "3xl": {
            fontSize: "72px",
        },
        "2xl": {
            fontSize: "60px",
        },
        "lg": {
            fontSize: "46px",
        },
        "md": {
            fontSize: "36px",
        },
        "sm": {
            fontSize: "30px",
        },
        "xs": {
            fontSize: "24px",
        },
    },
    // styles for different visual variants ("outline", "solid")
    variants: {
        fontWeight: {
            normal: 400,
            medium: 500,
            semibold: 600,
            bold: 700,
        }
    },

And finally, you can use for global style:

<Box>
      <Heading as="h1">
        Heading 1
      </Heading>
</Box>

And this for another customized value:

<Box>
      <Heading as="h1" size="5xl" fontWeight="normal">
        Customized Heading 1
      </Heading>
</Box>

What did you think? Does this provide any help?

primos63 · 2021-10-28T01:03:34Z

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.

segunadebayo added the Topic: Styled System 💅🏻 label Apr 23, 2021

stale bot added the stale label Jun 2, 2021

stale bot removed the stale label Jun 2, 2021

primos63 mentioned this issue Aug 26, 2021

[Input / Text Styles] Input components don't respect the font size coming from a text style #4624

Closed

3 tasks

This was referenced Sep 19, 2021

FormLabel does not implement textStyle #4566

Closed

Fix 3884 text styles not applied correctly #4736

Closed

Responsive styles aren't applied when used in extendTheme with Heading component #4742

Closed

primos63 self-assigned this Nov 9, 2021

primos63 added the Type: Bug 🐛 Something isn't working label Nov 24, 2021

primos63 mentioned this issue Dec 16, 2021

Fix 3884 text styles not applied correctly #5253

Closed

primos63 removed their assignment Feb 2, 2022

chakra-ui locked and limited conversation to collaborators Mar 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

textStyles defined inside extendTheme aren’t applied correctly #3884

textStyles defined inside extendTheme aren’t applied correctly #3884

rastersysteme commented Apr 22, 2021

stale bot commented Jun 2, 2021

tbaschim commented Jun 2, 2021 via email

bangngo1508 commented Jun 8, 2021 •

edited

rastersysteme commented Jun 10, 2021

crimson-med commented Jun 24, 2021 •

edited

rastersysteme commented Jul 14, 2021

stephane-ruhlmann commented Jul 20, 2021 •

edited

stephane-ruhlmann commented Jul 20, 2021

rastersysteme commented Jul 20, 2021

stephane-ruhlmann commented Jul 20, 2021 •

edited

primos63 commented Aug 25, 2021 •

edited

ddkang commented Oct 13, 2021

heydoughenrique commented Oct 27, 2021

primos63 commented Oct 27, 2021

heydoughenrique commented Oct 27, 2021

primos63 commented Oct 28, 2021

textStyles defined inside extendTheme aren’t applied correctly #3884

textStyles defined inside extendTheme aren’t applied correctly #3884

Comments

rastersysteme commented Apr 22, 2021

🐛 Bug report

💥 Steps to reproduce

textStyles which should be applied

body styles

Heading styles

Button styles

Text styles

💻 Link to reproduction

🧐 Expected behavior

🧭 Possible Solution

🌍 System information

📝 Additional information

stale bot commented Jun 2, 2021

tbaschim commented Jun 2, 2021 via email

bangngo1508 commented Jun 8, 2021 • edited

rastersysteme commented Jun 10, 2021

crimson-med commented Jun 24, 2021 • edited

rastersysteme commented Jul 14, 2021

stephane-ruhlmann commented Jul 20, 2021 • edited

stephane-ruhlmann commented Jul 20, 2021

rastersysteme commented Jul 20, 2021

stephane-ruhlmann commented Jul 20, 2021 • edited

primos63 commented Aug 25, 2021 • edited

ddkang commented Oct 13, 2021

heydoughenrique commented Oct 27, 2021

primos63 commented Oct 27, 2021

heydoughenrique commented Oct 27, 2021

primos63 commented Oct 28, 2021

bangngo1508 commented Jun 8, 2021 •

edited

crimson-med commented Jun 24, 2021 •

edited

stephane-ruhlmann commented Jul 20, 2021 •

edited

stephane-ruhlmann commented Jul 20, 2021 •

edited

primos63 commented Aug 25, 2021 •

edited