baseFontSize не меняет размер всех элементов

Question

Я действительно новичок в Gatsby и React, и я делаю учебник . Я обнаружил typography.js, и в какой-то момент они говорят

Попробуйте изменить baseFontSize на 24px, а затем на 12px. Размер всех элементов изменяется, так как их размер шрифта основан на baseFontSize.

Как вы могли ожидать, это не так, и я действительно не понимаю, почему.

Вот мой typography.js файл:

import Typography from "typography";

const typography = new Typography({ baseFontSize: "52px" });

export default typography;

// index.js:

import React from "react";

export default () =>
    <div style={{ margin: '3rem auto', maxWidth: 600 }}>
        <h1>title</h1>
        <div>
            <p>
                From Richard Hamming’s classic and must-read talk, “<a 

href="http://www.cs.virginia.edu/~robins/YouAndYourResearch.html">
                        You and Your Research
            </a>”.
          </p>

            </div>
        </div>

и gatsby-config.js

    module.exports = {
        plugins: [
            {
                resolve: `gatsby-plugin-typography`,
                options: {
                    pathToConfigModule: `src/utils/typography.js`,
                },
            },
        ],
    };

Когда я изменяю baseFontSize, это влияет только на элемент h1.

Может кто-нибудь объяснить, почему мне?

Спасибо

Захват

Answer 1

В зависимости от typography.js (исправлена) возникла ошибка, которая вызывала проблемы. Если вы обновитесь до последней версии Typography.js с помощью npm upgrade, проблема будет исправлена. Смотрите эту проблему для более подробной информации https://github.com/gatsbyjs/gatsby/issues/5166