我遇到了一个问题，如果我重新加载我的网页，我的文本字体的变化和 Flink ，由于css样式应用顺序。我正在使用Next JS 13与Material UI和Tailwind CSS。
Gif of issue
我希望我所有的顺风css加载页面之前显示给用户，但我无法做到这一点。
我的文件结构如下
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body,
html,
:root {
height: 100%;
width: 100%;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}顺风配置
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
important: '#__next',
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
plugins: [],
}
export default config布局
import './globals.css'
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html id="__next" lang="en">
<body>{children}</body>
</html>
)
}Page.tsx
import React from 'react';
import StartButton from './components/StartButton';
import { Container, Typography } from '@mui/material';
const Home: React.FC = () => {
return (
<Container
disableGutters
maxWidth={false}
className="flex flex-col items-center justify-center h-screen w-full bg-green-800"
>
<Typography variant="h1" gutterBottom className="text-6xl text-white mb-4 animate__animated animate__bounce">
Poker Game
</Typography>
<StartButton />
</Container>
);
};
export default Home;startButton.tsx
"use client"
import { useRouter } from 'next/navigation';
import { ButtonBase, Typography } from '@mui/material';
import axios from 'axios';
import React from 'react';
const StartButton: React.FC = () => {
const router = useRouter();
const startGame: VoidFunction = async () => {
try {
const response = await axios.post('https://your-api.com/start-game');
const gameId = response.data.gameId;
router.push(`/game/${gameId}`);
} catch (error) {
console.error(error);
}
};
return (
<ButtonBase
onClick={startGame}
className="w-24 h-24 rounded-full flex items-center justify-center transition-transform transform hover:scale-105"
style={{ backgroundImage: "url('/start-game-chip.png')", backgroundSize: 'cover', backgroundPosition: 'center' }}
>
<Typography variant="subtitle1" component="div" className="text-white font-bold">
Start Game
</Typography>
</ButtonBase>
);
};
export default StartButton;
1条答案
按热度按时间ergxz8rk1#
你是在开发模式吗？（“next dev”）
加载发生在开发模式中，而在生产模式中不会发生。尝试运行“next build”和“next start”（如果您使用CLI，则只需运行“nom run build”和“nom run start”）。你应该能看出区别。