如何移除Next.js+Tailwind+Antd项目中的css-dev-only开发专属样式？

方法1：禁用Antd的CSS哈希前缀 #

这个css-dev-only-do-not-override-xxx前缀是Antd开发环境下的CSS隔离哈希标识，可以通过配置关闭：

在next.config.js中添加配置：

const nextConfig = {
  // 其他原有配置
  modularizeImports: {
    'antd': {
      transform: 'antd/es/{{member}}',
      preventFullImport: true,
    },
  },
  experimental: {
    optimizeCss: true,
  },
}

module.exports = nextConfig

或者在Antd主题配置文件（如theme.config.ts）中设置：

import { theme } from 'antd';

export default theme({
  token: {
    // 你的主题配置
  },
  cssVar: false, // 禁用CSS变量及哈希前缀
});

方法2：用Tailwind或自定义CSS强制覆盖 #

如果仅需修改特定样式，直接用!important强制覆盖：

/* 在globals.css等全局样式文件中 */
.ant-layout-header {
  padding: 0 !important;
  background-color: #ffffff !important;
}

或者在组件中使用Tailwind的!前缀：

import { Layout } from 'antd';
const { Header } = Layout;

// 组件内使用
<Header className="!p-0 !bg-white">页面头部</Header>

方法3：通过ConfigProvider全局配置组件样式 #

利用Antd的ConfigProvider统一修改Layout组件的默认样式：

import { ConfigProvider, Layout } from 'antd';
const { Header } = Layout;

export default function RootLayout({ children }) {
  return (
    <ConfigProvider
      theme={{
        components: {
          Layout: {
            headerBg: '#ffffff',
            headerPadding: '0 16px',
          },
        },
      }}
    >
      <Header>页面头部</Header>
      {children}
    </ConfigProvider>
  );
}

方法4：手动导入Antd CSS替代自动注入 #

在_app.tsx/_app.jsx中手动导入Antd的基础CSS，避免框架自动注入带哈希前缀的开发环境样式：

// 先导入Antd重置样式
import 'antd/dist/reset.css';
// 再导入Tailwind全局样式
import '@/styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

内容的提问来源于stack exchange，提问作者Bufer