KyleAMathews/typography.js

fontSize theme override

Opened this issue · 1 comments

jamesgrubb commented

I'm using kirkham theme with some overrides.

kirkhamTheme.overrideThemeStyles = ({scale, rhythm }) => ({
    "h1" : {
        marginBottom: rhythm(10),
        marginTop: rhythm(2),
        fontSize: scale(3)
    }
})

when I inspect the code it seems font size is output as an object rather than css readabel code

fontSize{font-size: 9.93837rem;
    line-height: 10.8rem;
    }
mbao01 commented

Hello @jamesgrubb I took a look at the overrideThemeStyles API.
The scale method returns a BaseLine type which is an object containing font-size and line-height

What you need to do is spread scale(3). Here;

kirkhamTheme.overrideThemeStyles = ({scale, rhythm }) => ({
    "h1" : {
        marginBottom: rhythm(10),
        marginTop: rhythm(2),
        ...scale(3)
    }
})

overrideThemeStyles: (VerticalRhythm: VerticalRhythm, . . . ) signature

baseline