Overrides Styles - Specifying multiple of the same css selector
jonnyelliot opened this issue · 0 comments
jonnyelliot commented
overrideStyles
specifies its styles using an Object, which can be an issue when we need to repeat the same css selector, as is the case with @font-face
, as JS object must have unique keys.
In this example, only the last @font-face will actually be applies, due to duplicate keys:
overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
'@font-face': {
fontFamily: 'FreeSans',
src: `url(...) format('woff')`,
fontStyle: 'normal',
},
'@font-face': {
fontFamily: 'FreeSans',
src: `url(...) format('woff')`,
fontStyle: 'bold',
},
'@font-face': {
fontFamily: 'Arciform',
src: `url(...) format('woff')`,
fontStyle: 'normal',
}
}))
I am appending varying amounts of spaces to the end of keys to workaround this issue, but is (or could) there be a better solution?