baseFontSize不会更改所有元素

Question

我是Gatsby和React的新手，我正在做the tutorial。我发现了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元素。

有人可以向我解释原因吗？

谢谢

Capture

Answer 1

在typography.js（现在已修复）的依赖项中存在一个导致问题的错误。如果您通过运行npm upgrade升级到最新版本的Typography.js，问题将得到解决。有关详细信息，请参阅此问题https://github.com/gatsbyjs/gatsby/issues/5166