search

creativetimofficial / ct-purity-ui-dashboard-pro

6 stars 1 forks source link

[Bug] theme fontSizes and lineHeights sttings are ignored by extendTheme function #4

Closed haw0k closed 1 year ago

haw0k commented 1 year ago

Version

2.0.2

Reproduction link

https://demos.creative-tim.com/purity-ui-dashboard/

Operating System

elementary OS 6.1 Jólnir

Device

PC

Browser & Version

Firefox 105.0.1

Steps to reproduce

  1. open src/theme.js
  2. add following to the extendTheme prop object fontSizes: { "4xl": "34px" }, lineHeights: { "4xl": "40px"},
  3. add to any layout Page Not Found
  4. Check the actual font-size and line-height size in browser

    What is expected?

    Page Not Found

    with font-size=34px and line-height=40px

    What is actually happening?

    Page Not Found

    font-size: 72px and line-height: 72px

Solution

Additional comments

tdumitrache commented 1 year ago

Hi haw0k,

To override the default theme styles of Chakra UI, you have 2 options:

  1. Add a fontSizes object to the globalStyles in theme to override all the fontSizes in the entire project. image
  2. Or just create another file for styling the Text Component in the project with the styles that you want.
haw0k commented 1 year ago

Hi haw0k,

To override the default theme styles of Chakra UI, you have 2 options:

1. Add a fontSizes object to the globalStyles in theme to override all the fontSizes in the entire project.
   ![image](https://user-images.githubusercontent.com/81553507/193638235-8a744d79-a874-4254-8515-fe7bce565dfc.png)

this option isn't working

image image image

tdumitrache commented 1 year ago

In this example you are changing the fontSize globally, but then you use size insead of fontSize. Try to use 'sizes: { "4xl": "36px"}' instead. Cheers!