如何用普通CSS类名覆盖Chakra UI (或情感CSS-in-JS)样式？
问题
我编写的任何CSS类名都不会覆盖Chakra组件样式，即使直接将它们作为className、ex：<Button className="my-class-that-wont-work">传递。
复制步骤
我使用他们的CRA指南创建了一个简单的新Chakra-UI项目。
npx create-react-app my-app --template @chakra-ui我接着添加了一个index.css文件，并用一个简单的类名将它导入到src/index.js (或src/App.jsx)中：
.my-class-name {
display: flex;
justify-content: space-between;
}然而，当我试图用CSS类覆盖任何Chakra UI的组件样式时，CSS类样式就会被Chakra类所取代。下面是一个简单的例子，试图使Modal页脚具有灵活的空间--在这些按钮之间展开。
<ModalFooter className="my-class-name">
这似乎是因为Chakra UI是如何在运行时使用<style>标记在<head>末尾使用CSS- in -JS生成的CSS注入的，这使Chakra组件CSS有权覆盖通过import "./index.css";导入到JSX组件中的自定义CSS。
我的问题
有没有办法迫使Chakra在运行时更早地在<head>元素中加载，这样我就能够用普通的CSS类覆盖它了吗？
实现这一点不仅使我更容易在现有的代码库中实现Chakra，而且还允许依赖实用程序类的框架(如Tailwind )正常工作。
编辑：--在对这一具体问题的回应中，情感添加了对“前置”旗的支持，它允许在样式注入的选定DOM元素的末尾添加样式标记。这似乎是这个问题的完美解决方案，但我不知道如何把它传递给脉轮用户界面
回答 1
Stack Overflow用户
发布于 2022-07-27 01:11:05
因为Chakra使用情感CSS作为它的样式解决方案，所以我能够让Chakra样式更早地在<head>中加载，而不是像这样在线程后面使用Emotion的CacheProvider来加载；
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';
import { ChakraProvider } from '@chakra-ui/react';
const emotionCache = createCache({
key: 'emotion-css-cache',
prepend: true, // ensures styles are prepended to the <head>, instead of appended
});
export default function App() {
return (
<CacheProvider value={emotionCache}>
<ChakraProvider>
</ChakraProvider>
</CacheProvider>
);
}这解决了我的问题，但我不确定这个解决方案有多强大，因为Chakra文档没有正式记录它。如果有人对如何实现这个问题有更好的想法，那么现在还没有定论。
https://stackoverflow.com/questions/73073413
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号