我正在使用 NextJS 14，并且我有以下内容：
全局.css：
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@layer reset {
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
}
然后在我的全局layout.js 文件（我的应用程序的入口布局）中，我有以下内容：
import '../globals.css'
import { notFound } from 'next/navigation';
import { getTranslations } from 'next-intl/server';
import React from 'react';
import { colors, fonts } from '../globalTokens.stylex';
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
html: {
colorScheme: 'light dark',
},
reset: {
minHeight: '100%',
margin: 0,
padding: 0,
},
body: {
background: colors.background,
fontFamily: "Plus Jakarta Sans" //I specified the fontFamily for my app here
},
});
export default async function RootLayout({ children, params: { locale } }) {
if (!locales.includes(locale)) notFound();
return (
<html {...stylex.props(styles.html, styles.reset)} lang={locale}>
<body {...stylex.props(styles.reset, styles.body)}>
{children}
</body>
</html>
)
}
不幸的是，该字体没有应用到 antd 5 中的文本和按钮上。
我该怎么办？
Demo，我的建议是使用 Ant Design 主题，查看 documentation 。 最小代码示例
import { Button, ConfigProvider, Space } from "antd";
import React from "react";
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
// Seed Token
colorPrimary: "#00b96b",
borderRadius: 2,
fontFamily: `'Brush Script MT', cursive`,
// Alias Token
colorBgContainer: "#f6ffed",
},
}}
>
<Space>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</Space>
</ConfigProvider>
);
export default App;