baseFontSize 不会改变所有元素的大小

Question

我是 Gatsby 和 React 的新手，我正在做 the tutorial。我发现 typography.js，在某些时候，他们说

Try changing the baseFontSize to 24px then 12px. All elements get resized as their font-size is based on the 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

baseFontSize 不会改变所有元素的大小

baseFontSize doesn't change size of all elements

gatsby

Try changing the baseFontSize to 24px then 12px. All elements get resized as their font-size is based on the `baseFontSize`.

baseFontSize 不会改变所有元素的大小

baseFontSize doesn't change size of all elements

gatsby

Try changing the baseFontSize to 24px then 12px. All elements get resized as their font-size is based on the baseFontSize.

Try changing the baseFontSize to 24px then 12px. All elements get resized as their font-size is based on the `baseFontSize`.