Gatsby-theme-novela: [Help] How to override global styles ?

Created on 17 Dec 2019 · 5Comments · Source: narative/gatsby-theme-novela

Hi, first off all thank you for this great theme, I'm loving it !

I need help to customize the styles of a component : I shadowed the header navigation component to replace it by my own header (with my menu in it), but it seems like the global styles of novela theme is overriding my own styles, especially the font-family and the font-weight.

I use a typography util for managing fonts in my site :

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: [
    "Lato",
    "Helvetica Neue",
    "Segoe UI",
    "Helvetica",
    "Arial",
    "sans-serif",
  ],
  bodyFontFamily: ["Roboto", "serif"],
})

// Insert styles directly into the <head>
typography.injectStyles()

export default typography

And I also tried to customize gatsby plugin theme ui like so :

export default {
  ...novelaTheme,

  colors: {
    ...novelaTheme.colors,
    primary: "#000",
    secondary: "#73737D",
    accent: theme.colors.terracota,
    grey: "#73737D",
    background: "white",
    gradient: "none",
  },
  fonts: {
    ...novelaTheme.fonts,
    serif: "'Roboto', serif",
  },
}

The thing is that it seems to work for the main section, but not for the shadowed header which font-family and font-weight stays the ones defined in the global styles of the theme.

Any help will be helpful !

Thanks

help wanted question

Source

Kevinnko

Most helpful comment

I was able to test this today by copying the contents of @narative/gatsby-theme-novela/src/styles/global.ts into my local site at src/@narative/gatsby-theme-novela/styles/global.ts. I was able to then update the font-family for the body tag and confirmed that it did update on the site.

Another option that I tested was shadowing the components that do not have the font-family defined and that also worked. An example would be in @narative/gatsby-theme-novela/src/sections/article/Article.Hero.tsx, adding font-family: ${p => p.theme.fonts.serif}; to the HeroSubtitle so it picks up on the styles defined from theme-ui.

markahrens on 5 Feb 2020

❤2

All 5 comments

Any way you could link the site you're working on? I could take a look for you and see if it's an issue with the setup or how we've configured Novela.

brotzky on 18 Dec 2019

Yes, I just sent you an invitation.
Thanks !

Kevinnko on 18 Dec 2019

It looks like there are fonts defined for the body element in @narative/gatsby-theme-novela/src/styles/global.ts that are being applied to components that have not specified the theme.serif or theme.sansSerif fonts. Would it make sense to also shadow the global.ts file to change the default body font there too?

markahrens on 29 Jan 2020

One way to find out @markahrens!

To be honest I haven't attempted to override global styles so I can't give you a clear answer -- sorry!

brotzky on 30 Jan 2020

markahrens on 5 Feb 2020

❤2

Was this page helpful?

0 / 5 - 0 ratings