next.js 我如何在Ant Design中设置应用程序宽字体

hc8w905p 于 6个月前发布在 Ant Design

关注(0)|答案(1)|浏览(101)

我使用NextJS 14，我有以下内容：
globals.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中应用到我的文本和按钮上。
我该怎麽办？

next.js

来源：https://stackoverflow.com/questions/77738521/how-can-i-to-set-app-wide-font-in-ant-design

1条答案

按热度按时间

juud5qan1#

Demo，我的建议是使用Ant设计主题检查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;

字符串

赞(0）回复(0）举报 6个月前

我来回答

next.js 我如何在Ant Design中设置应用程序宽字体

1条答案

相关问题

热门标签

最新问答