Doczrc themeConfig not applying heading styles as expected

[Yihwan]

I'm attempting to customize styles using the doczrc config, and I've found that heading styles aren't applied as expected.

For example:

export default {
  themeConfig: {
    fonts: { // this works
      body: 'serif',
      heading: 'serif',
    },
    styles: {
      h2: { // this does not work
        color: 'red',
        fontWeight: 400,
      }
    }
  }
}

Does anyone have ideas why? I've resorted to shadowing the Heading component to apply some default styles, but that doesn't seem sustainable long-term.

I was able to reproduce this issue on a fresh project and can upload/link to that if helpful.

[zhangguimei]

I have the same issue

[rakannimer]

Hey !

Thanks for reporting this issue and providing an easy way to reproduce it.

There was indeed an issue with theming mdx components.
Fixed by 3a9bdb7.

The new version is released on the next tag under 2.2.1-alpha.0. You can try it out now by running :

yarn add docz@next

And will soon be in latest under 2.2.1 👍

PS: For more information about styling using themeConfig check : https://theme-ui.com/theme-spec

[Yihwan]

hey @rakannimer thanks for taking a look!

unfortunately i am still seeing this issue with 2.2.1-alpha.0. You can check it out at this branch: https://github.com/Yihwan/gatsby-docz-flicker-issue/tree/theming-issue

I used this doczrc.js, and am only seeing the serif fonts in body applied:

export default {
  themeConfig: {
    fonts: {
      body: 'serif',
    },
    style: {
      h2: {
        color: 'red',
        fontWeight: 500,
      }, 
    }
  }
}

[rakannimer]

I think it's still happening in the repo you provided because you have shadowed all the files in gatsby-theme-docz which is preventing the fix from being applied in the updated gatsby-theme-docz.

In particular the fix which is in base/Layout and index.js is being over-written by :

• https://github.com/Yihwan/gatsby-docz-flicker-issue/blob/theming-issue/src/gatsby-theme-docz/base/Layout.js

• https://github.com/Yihwan/gatsby-docz-flicker-issue/blob/theming-issue/src/gatsby-theme-docz/index.js

I advise you to remove the theme and only keep the file(s) that you really need to shadow to be able to benefit from new features and fixes 👍

[Yihwan]

hmm interesting, i just removed the entire gatsby-theme-docz directory and i am still noticing the styles not being applied in the above repo. maybe i missed something else?

[rakannimer]

I found 2 other issues :

1. you updated docz but gatsby-theme-docz was still on the previous version.
2. there was a typo in your doczrc you wrote style instead of styles.

Could you give Yihwan/gatsby-docz-flicker-issue#1 a try and let me know ?

[Yihwan]

so weird, i just merged your PR into https://github.com/Yihwan/gatsby-docz-flicker-issue/tree/theming-issue, but am still not seeing a change. but if you can see the h2 elements turn red on the same branch, maybe it is just something to do with my local env.

[Yihwan]

@rakannimer i just got this fix working on a separate repo, so i am guessing i couldn't figure it out this morning due to lack of coffee. 😆

thank you again, and i'll let you know if i notice any other strange things!

[rakannimer]

Awesome ! Happy to hear that 😄

I will keep this issue open until we release 2.3.0

[zhangguimei]

y！

感谢您报告此问题并提供了一种简单的方法来重现它。

主题mdx组件确实存在问题。
由3a9bdb7修复。

新版本发布在的next标记下2.2.1-alpha.0。您可以运行以下命令立即尝试：

yarn add docz@next

并将很快出现在latest2.2.1下👍

PS：有关使用themeConfig样式的更多信息，请检查：https ://theme-ui.com/theme-spec

Hey !

Thanks for reporting this issue and providing an easy way to reproduce it.

There was indeed an issue with theming mdx components.
Fixed by 3a9bdb7.

The new version is released on the next tag under 2.2.1-alpha.0. You can try it out now by running :

yarn add docz@next

And will soon be in latest under 2.2.1 👍

PS: For more information about styling using themeConfig check : https://theme-ui.com/theme-spec

themeConfig: {
styles: {
h2: {
fontSize: 18,
marginBottom: 10,
},
pre: { marginTop: '8px', 'margin-bottom': '20px' },
},
},
The marginBottom in pre and h2 is not work as expected, and I can use margin-bottom to replace it。

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.