Making adjustments to the gatsby-blog-starter, I decided that some of the style overrides in the starter, that were made at the component level, would perhaps be better applied globally.
I have mixed success moving these styles from the layout and blog-post template files, to src/utils/typography.js.
When I added these override styles (similar styles) for an h1 and an h3 in separate selectors, there was no result. see images.
However, when applying the same rules through a h1,h3 selector these rules are applied. Though the rules for each element are not identical, they overlap so it's a step closer to an acceptable compromise.
Either I'm missing something obvious, or this is a bug, or this is a quirk to using overrideThemeStyles and Typography.js that deserves documentation in the README or elsewhere.
Making adjustments to the gatsby-blog-starter, I decided that some of the style overrides in the starter, that were made at the component level, would perhaps be better applied globally.
I have mixed success moving these styles from the layout and blog-post template files, to
src/utils/typography.js.When I added these override styles (similar styles) for an h1 and an h3 in separate selectors, there was no result. see images.
However, when applying the same rules through a
h1,h3selector these rules are applied. Though the rules for each element are not identical, they overlap so it's a step closer to an acceptable compromise.Either I'm missing something obvious, or this is a bug, or this is a quirk to using overrideThemeStyles and Typography.js that deserves documentation in the README or elsewhere.