问题标签 [styled-jsx]

TL;博士

如何将包含一个或多个 CSS 规则的变量插入到 styled-jsx 中（在后台使用 styled-jsx-plugin-sass）？

我有以下 JSX 风格：

并且contained是我试图将上述规则插入其中的变量：

笔记：

breakAt是一个生成特定媒体查询的函数(breakpoint: string) => (content: string) => string

我已确保styled-jsx-plugin-sass配置正确 - 按预期以原始行为编写生成的 CSS。

我还研究了我认为 styled-jsx 的行为方式——它似乎对我在编写生成器（(content: string) => string作用于contained）并调用它时输入的代码进行了一些文字解析，并且解析器识别出我写了一个CallExpression，但是因此未能渲染任何东西。

我知道这可以通过使用来解决，@mixin/@include但我正在挑选我目前喜欢的 Sass 功能（主要是嵌入式规则），并且很想知道有什么可能。

非常感谢您的输入和更正。请在回答之前阅读完整的问题！

我在我的项目中使用 styled-jsx，我只是将它迁移到 monorepo 结构，从那时起我一直遇到以下问题：

每次我使用 style-jsx 的默认标签时，它都会出现在 jsx 属性下：

我发现了一个关于这个主题的已关闭问题，根据这个链接interface HTMLAttributes，如果我手动添加以下两行到in ，这个问题可以解决react/index.d.ts：

这实际上解决了问题，但我不想手动修改node_modules.

根据vercel中的这个已关闭问题，我应该可以通过简单地运行来解决这个问题yarn add -D @types/styled-jsx，但这不起作用。

使用 npm 而不是 yarn 安装包也解决了这个问题，但我不想更改我正在使用的包管理器。此外，使用 npm 安装这个包，使用 yarn 安装其他包会使应用程序崩溃。

我认为这可能是styled-jsx与纱线工作区相关的提升问题，但添加

到我的根 package.json 和使用 styled-jsx 的项目的 package.json 也没有解决问题。

有没有人解决这个问题，不涉及手动修改react/index.d.ts、更改我的包管理器或放弃 monorepo 结构？

使用package.json的项目styled-jsx：

我的package.json根文件夹：

我正在开发一个博客，我最近添加了一个div元素display: flex;以使元素出现在同一行中。

但是，在每次加载页面时进行此更改后，元素会向右移动一点，并且字体加载有点晚。这只会发生一段时间，在页面加载后，它们都会移回预期的位置。

注意：这不会出现在我的本地主机上，而只会出现在生产版本中（或部署时）

请查看下面的视频，自己看看：

https://imgur.com/XY0SHPM

或者，如果在桌面上亲自见证：https ://lucid-brown-a29dc1.netlify.app/

JSX

对应的css：

到目前为止，我已经尝试过：

• 更改div为span但将标签与上面的前缀对齐
• 删除flex但是我如何将项目连续对齐？
• 试图通过删除复杂的计算来提高 CSS 性能
• readgrid应该使用，flex但看起来grid不可用（可能需要使用一些 css 框架？）
• 我还观察到字体颜色的加载时间比页面晚一点，所以这可能根本不相关flex，我只是在叫错树？

我是一个 CSS 新手，所以我可能没有在这里使用最佳实践。在此处粘贴整个 CSS，因为我无法找到问题的原因。是因为 flex box 性能很重吗？我怎样才能减轻这种情况？

如果有人想阅读整个代码：https ://github.com/amita-shukla/blog-1/blob/master/src/components/Blog/Teaser.js

我正在尝试阅读一些代码，并且在样式化的 jsx 中看到了以下“注释”：

我很想知道这里使用的@from-width,@below术语叫什么。他们的目的是什么。

虽然我知道这些块为不同的屏幕尺寸定义了 css，但我在网上找不到任何语法信息。

我也尝试在谷歌上搜索，但找不到任何提及。我还在存储库中进行了搜索，也没有找到这些术语的任何类型的“声明/定义”。

我想我正在失去理智。

我创建了一个新的 Nextjs 项目，通过 NPM 安装 Framer-Motion，以开发模式运行该项目。一切都会编译并加载页面，但是一旦我向元素添加动作，它就会消失而没有错误。

我在PC和Mac上都得到了这个。我什至删除了我的节点模块和 package.lock 文件，并回滚到我过去工作过的 Next.js 和 framer-motion 版本，但它没有成功。只是为了好玩，我用 framer-motion 创建了一个新的 react 应用程序，它在那里没有问题。

我是 Next.js 的初学者并做出反应，我正在尝试使用它<style jsx>来设置页面样式。它在大多数情况下都有效，但是当我动态生成内容时，不应用 className 样式。由于我对术语还不熟悉，所以很难用文字来解释，因此我将尝试通过示例进行解释（尽量使其简单）。这是我的页面内容：

这是我在浏览器中看到的：

我希望看到以红色显示的文章列表项，但事实并非如此。我错过了什么 - 如何使这项工作？谢谢！

当我尝试运行我的应用程序时总是出现此错误

并且通过 babelrc 文件是

我的网站是用 Next.js 和 Tailwind CSS 构建的。我按照默认说明安装它们。由于我想自定义链接的外观而不对每个链接应用内联类，styled-jsx-plugin-postcss所以我还安装了，以便可以使用styled-jsx 已经捆绑在 Next.js 中的链接。

它工作得几乎完美，但由于某种原因，<style jsx>标签中应用的暗模式样式被忽略了。我正在使用记录在案class的策略。我怎样才能使这些样式起作用？

下面是来自的示例代码index.js。我也将它上传到 Codesandbox。

我正在尝试填充 100% 的 ANT 卡高度，但是当我为孩子使用 100% 的高度时，它会崩溃。有谁知道怎么可能？我确定 ant Card 不等于 0% 因为它的父级有高度和宽度

当我开发或构建时，我遇到了这个问题。

我刚刚在 gatsby 中更新到 v3，所以我将遇到几个问题，这只是第 1 个问题。我认为这可能是 styled-jsx-plugin-postcss 的问题，但我不确定如何继续。我似乎找不到文档帮助。感谢您的任何帮助！