The fontSize token in ConfigProvider for the Typography component of Ant-Design is not applied

Question

I want to change fontSize token only for Typography component, but it doesn't apply for some reason. If I change the token globally, it changes - but then the token will affect all the other components, and I don't want that

Here's the code:

function App() {
return (
    <ConfigProvider
        theme={{
            token: {
                lineHeight: 1.2,
            },
            components: {
                Typography: {
                    fontSize: 20,
                    fontSizeHeading1: 32,
                    fontSizeHeading2: 24,
                    fontSizeHeading3: 20,
                    fontSizeHeading4: 16,
                    fontSizeHeading5: 14,
                    lineHeightHeading1: 1.2,
                    lineHeightHeading2: 1.2,
                    lineHeightHeading3: 1.2,
                    lineHeightHeading4: 1.2,
                    lineHeightHeading5: 1.2,
                },
                Select: {
                    controlHeight: 40,
                    controlHeightLG: 42,
                    borderRadius: 16,
                    lineWidth: 0,
                },
            },
        }}
    >
        <RouterProvider router={router} />
    </ConfigProvider>

Draws typography not with 20px font, but with default 14px. Why is this happening and how can I do it?

Answer 1

Currently, it is not possible to style most of the components. Here is the link to the relevant issue on this matter