如何用常规CSS类名覆盖Chakra UI（或Emotion CSS-in-JS）样式？

问题描述 #

自定义CSS类传入Chakra UI组件的className属性后，无法覆盖组件自带样式，例如<Button className="my-class-that-wont-work">中的自定义样式始终被Chakra的样式覆盖。

问题原因 #

Chakra UI基于Emotion实现CSS-in-JS，默认会将生成的<style>标签注入到<head>标签的末尾，导致其样式优先级高于通过import "./index.css"导入的自定义CSS文件。

解决方案 #

利用Emotion的prepend配置项，将Chakra生成的样式注入到<head>的开头，让自定义CSS的优先级更高。具体步骤如下：

1. 创建自定义Emotion缓存 #

在项目中新建src/emotion-cache.js文件，配置开启prepend选项：

import createCache from '@emotion/cache';

export const cache = createCache({
  key: 'chakra-ui-cache',
  prepend: true, // 将Emotion样式注入到<head>开头
});

2. 在入口文件中使用自定义缓存 #

修改项目入口文件（如src/index.js或src/main.jsx），用Emotion的CacheProvider包裹ChakraProvider，并传入自定义缓存：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { CacheProvider } from '@emotion/react';
import { ChakraProvider } from '@chakra-ui/react';
import { cache } from './emotion-cache';
import App from './App';
import './index.css'; // 保持自定义CSS的导入位置不变

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <CacheProvider value={cache}>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </CacheProvider>
  </React.StrictMode>
);

3. 验证效果 #

现在将自定义CSS类传入Chakra组件（如<ModalFooter className="my-class-name">），自定义样式会优先生效，Tailwind CSS等工具类框架也能正常覆盖Chakra组件样式。

临时替代方案：如果不想修改缓存配置，可以给自定义样式添加!important提升优先级，但这会增加样式维护成本，不推荐长期使用。

内容的提问来源于stack exchange，提问作者sgarcia.dev