reactjs-如何用普通的 CSS 类名覆盖 Chakra UI（或 Emotion CSS-in-JS）样式？
相关标签： # node.js
问题
我编写的任何 CSS 类名都不会覆盖 Chakra UI 组件样式，即使直接将它们作为类名传递，例如：<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 的样式覆盖。这是一个简单的示例，试图使模态页脚具有 flex + space-between，以便按钮展开。
<ModalFooter className="my-class-name">
这似乎正在发生，因为 Chakra UI 如何在运行时<style>结束时使用 Emotion CSS-in-JS 生成的 CSS 注入它<head>，这使 Chakra 组件 CSS 有权覆盖通过 JSX 组件导入的自定义 CSSimport "./index.css";
Chakra UI CSS 加载顺序
我的问题
有什么方法可以强制<head>在运行时在元素中更早地加载 Chakra UI CSS，以便我能够用普通的 CSS 类覆盖它？
实现这一点不仅可以让我更轻松地在现有代码库中实现 Chakra UI，还可以让依赖实用程序类的 Tailwind CSS 等框架正常工作。
编辑：似乎为了响应这个特定问题，Emotion 添加了对“prepend”标志的支持，该标志允许在注入样式的选定 DOM 元素的开头而不是结尾添加样式标签。这似乎是这个问题的完美解决方案，但我不知道如何将它传递到 Chakra UI
特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。
举报
