Text Style Not Applying Unless Property Is Defined #3612 - GitHub

Trang chủ » Chakra Ui H1 » Text Style Not Applying Unless Property Is Defined #3612 - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} / chakra-ui Public

  • Uh oh!

    There was an error while loading. Please reload this page.

  • Notifications You must be signed in to change notification settings
  • Fork 3.6k
  • Star 40.4k
  • Code
  • Issues 5
  • Pull requests 16
  • Discussions
  • Actions
  • Security
  • Insights
Additional navigation options Text style not applying unless property is defined #3612 Unanswered forrest-keller asked this question in Q&A Text style not applying unless property is defined #3612 @forrest-keller forrest-keller Mar 18, 2021 · 2 comments · 3 replies Return to top Discussion options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

forrest-keller Mar 18, 2021

I am running into an issue where if I define a textStyle as follows:

h1: { fontSize: "100px" }

It works, but only when I define the fontSize property on my component as such:

<Heading fontSize="100px" textStyle="h1">Test</Heading>

Any tips on why this might be happening? Everything else seems to be working all right.
5 You must be logged in to vote 👍 1 All reactions
  • 👍 1

Replies: 2 comments 3 replies

  • Oldest
  • Newest
  • Top
Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

malashevskyi Mar 18, 2021

Because chakra has default styles for Heading component and it overrides your styles.

"I am running into an issue where if I define a textStyle as follows:" Where do you define your styles?
2 You must be logged in to vote All reactions 2 replies @spidertwin2 Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

spidertwin2 May 16, 2021

Hi,

In theme.ts, I am unable to customise fontWeight and fontSize. Other props are working fine.

import { extendTheme } from "@chakra-ui/react" const customTheme = extendTheme({ textStyles: { pageSubHeading: { fontSize: ["md", "l", "xl"], letterSpacing: "0.5px", color: "gray.400", fontWeight: "300", }, } }) export default customTheme

🌵
All reactions @spidertwin2 Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

spidertwin2 May 18, 2021

I just realized textStyle does not work on <Heading>. Changed it to <Text> and then it works.
👍 8 All reactions
  • 👍 8
Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply edited {{editor}}'s edit {{actor}} deleted this content . {{editor}}'s edit Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

jcespinoza Nov 11, 2021

Borrowing from this conversation, in my case I managed to make it respect my fontSize and fontWeight by defining them with dashes on the theme literal like so:

{ textStyles: { formLabels: { 'font-size': '16px', 'font-weight': '400', lineHeight: '14px' } } }

Strangely enough, `lineHeight' was respected without this hack.
0 You must be logged in to vote ❤️ 2 All reactions
  • ❤️ 2
1 reply @primos63 Comment options {{title}} Something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

Quote reply

primos63 Nov 11, 2021

These are the theme properties for form-label

const baseStyle: SystemStyleObject = { fontSize: "md", marginEnd: 3, mb: 2, fontWeight: "medium", transitionProperty: "common", transitionDuration: "normal", opacity: 1, _disabled: { opacity: 0.4, }, }

Your textStyle works because for the formLabels fontSize and not font-size is defined so the match fails (same for font-weight). You didn't have to do that for lineHeight because it isn't defined in the base style. I have a PR for this issue. It just hasn't gone through yet.
All reactions Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Category 🙏 Q&A Labels None yet 5 participants @forrest-keller @jcespinoza @primos63 @spidertwin2 @malashevskyi Heading Bold Italic Quote Code Link Numbered list Unordered list Task list Attach files Mention Reference Menu Select a reply Loading

Uh oh!

There was an error while loading. Please reload this page.

Create a new saved reply 👍 1 reacted with thumbs up emoji 👎 1 reacted with thumbs down emoji 😄 1 reacted with laugh emoji 🎉 1 reacted with hooray emoji 😕 1 reacted with confused emoji ❤️ 1 reacted with heart emoji 🚀 1 reacted with rocket emoji 👀 1 reacted with eyes emoji You can’t perform that action at this time.

Từ khóa » Chakra Ui H1