问题标签 [styled-jsx]

我正在以这种方式设置环境来处理使用“styled jsx”的 ReactJs/Next.js 项目，但 eslint 无法修复代码中间的 css 缺陷。

我怎样才能最好地配置 eslint 来处理我正在做的项目？

有人能告诉我如何在样式化 jsx 中的组件上使用 mixins 吗？每当我尝试 @include tablet{} 时，我都会不断收到“Error no mixin named tablet”错误。它适用于 home.module.scss，但不适用于每个单独的组件。

我尝试animation在没有任何条件的情况下在单独的行上添加，但没有应用过渡。我还尝试了该属性的反引号而不是双引号，但animation没有成功。如何在单击时应用动画并在单击时false播放半径的过渡是true？

我正在为设计系统创建一个 React 库并styled-jsx用作 CSS-in-JS 解决方案。我们的 Web 应用程序由我们提供支持，Next.js并且我们可以高效地使用，styled-jsx并且因为 Vercel 也是背后的公司，styled-jsx我们考虑在我们的设计系统 React 库中使用这个库。

我已经按照这篇文章来引导 React 库，唯一的区别是使用styled-jsx而不是styled components.

问题在于这styled-jsx并没有将 CSS 的范围限制在组件级别。我创建了一个Text组件，它基本上是排版的包装器。这是我编写的组件的代码。

索引.tsx

现在我尝试在我们的 Web 应用程序中使用这个组件，这里是我使用它的页面的代码。

测试版.tsx

这是页面的呈现方式。

如您所见，我通过道具为所有三个标题 3 文本应用了不同的颜色，但在主题上下文中都以默认颜色呈现（即White）。当我调试页面时，我发现了这一点。

所以，我发现了问题。组件通过 prop 获取颜色，但由于 CSS 不限于组件，所有Text组件都在全局范围内呈现它们的 CSS，并且我们知道最后应用的 CSS 将按优先顺序排列，因此所有组件正在拿Text组件渲染的 CSS Subtitle 2。我不知道我在这里缺少什么或为什么它没有按预期工作。

我知道我们可以切换到styled-components，如果我们找不到解决这个问题的方法，我们就会这样做。任何帮助，将不胜感激。谢谢。

当尝试在 NextJS 项目上运行测试时，我遇到了以下错误：

__mocks__/styled-jsx/css.js为了模拟 StyledJSX，我添加了一个包含以下代码的文件：

这会处理包含来自 styled-jsx 的正常 css 贴图的文件，但不适用于我的 App.js 文件，其中包含

和

任何指针将不胜感激！

我想使用 Image 组件设置背景图像并在其上设置线性渐变。到目前为止，没有运气。我尝试简单地将 alinear-gradient作为图像组件的背景。将 Image 组件放入 adiv并在其上放置 a linear-gradient。最后是下面的代码。

当然，我可以得到linear-gradient无图像的工作。问题可能是这打破了组件的优化范式。或者我可能只是不知道我在做什么。有什么想法吗？

注意：我知道有人发布了一个类似的问题，但它已被放弃而没有答案。

我将我的项目从 NextJS 10 升级到 NextJS 12。除了 Storybook 现在没有样式之外，一切正常。

我正在使用styled-jsx库来生成嵌入式css，将其用作：

它生成像class="jsx-2615582530 search-result". 在更新之前，它还会search-result.jsx-2615582530在生成的故事书中嵌入一种风格。现在，jsx 样式名称已经存在，但样式已消失。

我styled-jsx从3.3.1to5.0.0和 NextJS 升级到 12.0.3。没有改变任何装载机或任何东西。我猜，webpack 可能很容易升级。

我的配置：

和主要

<style>{styles}</style>此外，如果我在没有道具的情况下包含样式jsx，它们会包含在制作的故事书中。

只是，文本显示得很奇怪：

什么时候jsx在那里，<style />从生成的标记中完全丢失。

建议？

在我的 Next.js 项目中，我有一个组件，它只导入一个 CSS 文件，如下所示：

它是这样使用的：

现在我需要在我的组件中导入第二个 CSS 文件，如下所示：

但是我怎样才能使用第二个 CSS 呢？我尝试了以下方法，但没有奏效：

和：

请问有什么帮助吗？

我有一个 react-router 元素<NavLink/>，我正在尝试使用 styled-jsx 库对其进行样式设置。但是，我应用于其 className 的 css 属性没有任何效果。样式化普通的 jsx 元素效果很好。有谁知道是否有另一种方法可以设置此元素的样式（我想设置text-decoration: none）。如果可能的话，我想避免使用内联样式。

这是我的简化代码：

我已将 styled-jsx 添加到我的 Preact （使用此TS 模板设置）项目中，并且可以通过<style>标签内联样式设置内容而没有问题，例如：

但是，如果我按照他们的说明将该样式提取到一个单独的css变量中（在同一个文件中或在外部），我会收到以下错误：

在SO和Github上有一些答案/解决方案，但它们都涉及更改 webpack 配置——而且我没有 webpack 配置。看起来没有一个开箱即用的preact-cli. 我已babelrc按照建议将 babel 规则添加到我的：

但是，我没有macros从 babel 安装任何额外的或插件，因为那不在 styled-jsx 自述文件的原始说明中。