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.
![Screenshot 2020-03-26 16 54 59](https://user-images.githubusercontent.com/6064830/77628406-f8462680-6f82-11ea-9137-064b64982b8f.png)
However, when applying the same rules through a![Screenshot 2020-03-26 16 58 39](https://user-images.githubusercontent.com/6064830/77628680-54a94600-6f83-11ea-9650-617b6803e090.png)
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.