问题标签 [emotion-js]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 当浏览器样式与 nextjs 中带有情感样式组件的服务器不同时，样式不适用于第一个客户端渲染（也不是之后）
当前行为：
当有一个样式有条件地应用在浏览器上时，即使组件运行并且浏览器 props 被正确传入，来自服务器的样式也不会改变。从服务器发回的 html 保留在页面上，即使在传递新的基于浏览器的 props 的客户端上第一次渲染之后，组件仍继续显示服务器样式。这是在 nextjs 应用程序中，使用情感 11
我觉得这必须在某个地方进行介绍，但是我整天梳理了 SO、这些问题和 nextjs 问题，但没有发现任何描述确切问题的信息，也没有找到解决方法。
重现：Codesandbox 显示在服务器上具有一组样式的组件，然后在浏览器上时，应切换到另一组样式
https://codesandbox.io/s/cool-worker-meil8?file=/package.json:200-335
在服务器上，该框呈现为红色，因为 process.browser 为 false。在浏览器上，isBrowser 属性为 true，所以 js 运行后框应该是蓝色的。但是，尽管控制台日志显示样式化组件实际上确实在客户端上运行，并且 isBrowser true 并且背景颜色设置为蓝色，但该框仍然是红色（这不在沙箱中，但我拥有的唯一方法发现强制组件实际更改颜色是通过客户端导航或某种重新呈现组件的单独强制状态更新）。
预期行为：
我希望服务器发送回基于服务器版本的组件的 html/styles，然后在客户端上的第一次渲染之后，组件应该读取基于浏览器的样式并更新以匹配基于的样式浏览器道具。
环境信息：顺便说一下，这个codesandbox是使用codesandbox上nextjs的基础版本构建的。除了添加情感，我没有修改任何东西
以下是沙盒中的 deps：
“@emotion/react”：“11.4.1”
“@emotion/styled”：“11.3.0”
“下一个”：“最新”
“反应”：“17.0.2”
“反应域”：“17.0.2”
material-ui - 导入 MUI5 TextField 导致“Object(...) is not a function”
所以，我基本上是将项目从：
Material-UI 0.19 转换为 MUI 5.
babel-core 6.25 到 @babel/core 7.16
React 16.3 到 React 17.0.2
安装所有必需的依赖项（请参阅下面的依赖项），调整源代码以使用新的 MUI5 组件后，我遇到以下错误：
这是在导入行后引发的
堆栈跟踪的某些部分：
添加的依赖项
Babel 预设
Webpack 入口
reactjs - 找不到模块：无法解析 node_modules\@emotion\styled\base\dist 中的“@emotion/react”
我尝试了npm install @emotion/reactandnpm install @emotion/styled解决方案，错误没有清除。
请帮助
javascript - 带有 Material-UI 的 SSR 上的 @emotion/cache 始终为空
我将我的 React SSR 从纯 @emotion 切换到 material-ui 5.0，但不再提取样式。ID 提取createExtractCriticalToChunks效果很好，但是来自情感的 cache.inserted 对象现在始终是一个空对象。我在这里做错了什么？
HTML：
提取的ID：
缓存：
缓存设置 SSR：
服务器应用程序.js
reactjs - 如何提高浏览器控制台中情感js的解析速度【开发模式】？
我在我的应用内应用程序中使用情感 js 。当我检查元素以查看它的相关样式时，控制台处于加载状态（我认为它正在将 js 中的 css 解析为 css）5-7 秒，这很烦人。有人可以建议优化它的方法吗？
content-security-policy - 如何将“nonce”选项传递给 @emotion/core 的依赖项 @emotion/cache？
使用 storybook 进行 preact 演示和 webpack 捆绑 @emotion/core -> @emotion/cache -> @emotion/sheet 将样式插入 iframe 标头导致多个 CSP 错误，如下所示
我尝试检查以下文档 - https://emotion.sh/docs/cache-provider，https://www.npmjs.com/package/@emotion/sheet/v/10.0.0-really-unsafe-please- do-not-use.1?activeTab=dependents传递随机数，但我们不在任何组件中创建 StyleSheet / createCache，但 webpack 将 package.json 中的所有依赖项捆绑为主题的一部分，并应用默认选项（ nonce - undefined )
我尝试将 CacheProvider 添加到全局的故事书装饰器中，如下所示
我可以看到缓存块已呈现，但标头样式未使用 nonce 值更新。如果我在这里遗漏了任何东西，或者如果有另一种方法可以通过 nonce 来传递情感风格，请告诉我！谢谢！
reactjs - 如何在emotion-js中添加多个类
在反应中，使用emotion.js
dom中生成的这段代码是这样的
当一些事件发生时，我想向这个元素添加一些新类
它添加了新类，而不是替换类。
reactjs - 情绪反应 - 无法从父级访问元素？
我想将我的站点模型悬停在父级上并在卡上获取更改。
情感为我们提供了 3 个层次的解决方案。
我想以上述方式之一访问内容并获取卡片的样式，样式组件除外。
我为您提供 2 种类型。
我请您将鼠标悬停在将为我的卡片提供样式的内容上。不工作。
测试示例
reactjs - 自动化 Material UI 组件，以便于调试和测试
为了便于测试和调试，我们希望像 MUI 标记它们自己的内部组件一样标记我们自定义样式的组件。
目前，所有自定义样式的组件都获得以下格式的类：class="css-vxvgcl"就像所有 MUI 组件都获得类名一样：MuiBadge-root css-comk89
情感风格的组件可以通过在插件部分下的 babelrc 文件中添加以下部分来处理这个问题：
然而，这导致我们需要从情感而不是从 MUI 中导入样式。
这感觉像是与 MUI 风格的解决方案有风险的脱节。在 babelrc 文件中是否有任何可能的解决方案来处理这个问题，而不必在我们的组件中使用情感/样式？