nextjs v13 没有样式 #6172
Comments
|
我也遇见了 |
|
+1 |
按提示加上这个，看上去就好了：https://codesandbox.io/p/sandbox/youthful-meadow-zlc3qb?file=%2Fapp%2Fpage.tsx%3A3%2C38 
|
加上了这个 虽然不显示报错了 但是依然没有样式 |
|
我这个 codesandbox 里看着是好的，是么？ |
|
这个蓝色的就是样式呀 |
|
但是我每次使用 antd 组件的时候都需要引入一下这个文件吗 |
|
我自己试了下是不用的，参考 https://github.com/miracles1919/antd-mobile-examples/tree/master/next-13 可能是 codesandbox 的问题 |
我看demo中，next.config.js已经不需要配置 |
|
看起来是因为 |
|
实测 开发环境 使用 --turbo 会有样式 也不用 引入antd-mobile/es/global， webpack模式还得按照官网12的方式走 才有样式 |
|
这个应该是 nextjs 的问题，使用 经过我的测试发现（ 'use client';
import { Button } from 'antd-mobile';
export default function Home() {
return (
<main>
<Button>btn</Button>
</main>
}
)解决方法1：使用最新版本 nextjs 解决方法2：使用 css module 'use client';
import { Button } from 'antd-mobile';
+ import styles from './page.module.css';
export default function Home() {
return (
+ <main className={styles.main}>
<Button>btn</Button>
</main>
}
)
解决方法3：在 layout 加载 global 样式 // layout.tsx
+ import 'antd-mobile/es/global';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang='en'>
<body className={inter.className}>{children}</body>
</html>
);
}
|
Version of antd-mobile
5.30.0
Operating system and its version
iOS, Android
Browser and its version
No response
Sandbox to reproduce
No response
What happened?
nextjs v13.4.3
antd-mobile 5.30.0
没有样式
Relevant log output
[antd-mobile: Global] The px tester is not rendering properly. Please make sure you have imported `antd-mobile/es/global`.The text was updated successfully, but these errors were encountered: