Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

font size isn't changing

See original GitHub issue

Bug Report

Describe the bug Font-size of h1 isn’t changing when fontSize’s data type is Array.

my doczrc.js:

const path = require('path')

module.exports = {
  title: 'the title',
  description: 'description of component',
  src: path.resolve(__dirname, 'examples'),
  dest: './dist',
  codeSandbox: false,
  themeConfig: {
    styles: {
      h1: {
        fontFamily: '\'Source Sans Pro\', Helvetica, sans-serif',
        fontWeight: 100,
        fontSize: [36, 38, 42]
      }
    }
  }
}

But, the font-size is …

1120px: 36px 920px: 70px 420px: 50px

I expected …

1120px: 42px 920px: 38px 420px: 36px

Environment

OS: OS X (Mojave)
Node/npm version: v11.4.0 / v6.5.0
docz: 0.13.7
docz-theme-default: 0.13.7

Issue Analytics

State:
Created 5 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

5reactions

kachkaevcommented, Apr 20, 2019

My solution is a workaround. It’d be nice if the font in the menu could be tweaked in a slightly less crazy way 🙂

1reaction

kachkaevcommented, Jan 11, 2019

I finally manage to reduce font size in the menu on the left and in the main area by using the following workaround:

{
  themeConfig: {
    styles: {
      blockquote: {
        fontSize: 14,
      },
      body: { // <-- @emotion/css accepts nested objects with styles [1]
        "nav a": {
          fontSize: "14px !important",
        },
      },
      container: {
        fontSize: 14,
      },
      h1: {
        fontWeight: "normal",
        fontSize: 48,
      }
    }
  }
}

[1]: docz/packages/docz-theme-default/src/styles/global.ts#L15