问题标签 [styled-jsx]

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.

0 投票
5 回答
4951 浏览

reactjs - 警告:收到非布尔属性“jsx”的“真”。时代风格的 Jsx

我正在尝试将 styled-jsx 与一些代码一起使用。但是,无论我做什么,我似乎都得到了一个错误

我已经尝试重新安装 node_modules,确保我的配置都很好,并测试了不同的版本。

我的 package.json,

我的示例 React 代码仍然会引发错误。

根据文档,我希望没有任何错误消息

0 投票
1 回答
244 浏览

npm - 在已发布的 NPM 包中使用 styled-jsx 会给出警告:收到非布尔属性 `jsx` 的`true`

我正在尝试从我的nextjs-generic-landing-page制作一个易于使用的 NPM 包,而 NPM 现在位于https://www.npmjs.com/package/nextjs-generic-landing-page

由于某种原因,使用的组件styled-jsx不起作用,它们呈现奇怪并产生警告:

这是我使用 Babel 构建 NPM 包的代码:

有小费吗?

0 投票
1 回答
93 浏览

javascript - 为什么 styled-jsx 标签中的变量不起作用?

div组件不固定,但变量sticky为真。为什么?

0 投票
3 回答
1045 浏览

next.js - 为什么不应用 JSX CSS?

我正在处理 Next.js 网站上“学习”部分的文档。如果使用 jsx 样式标签,则下面的 CSS 不会应用于组件;但是,如果我将 CSS 添加为对象文字属性,它将被应用。如何获取要应用的 jsx 样式标签 CSS?

这将不适用:

但这有效:

0 投票
2 回答
322 浏览

javascript - 将 styled-jsx 与 postcss 一起使用,样式不会重新加载/重建

我正在使用带有 styled-jsx 的 postcss。我有一些我正在使用@import的CSS 文件_app.js。这工作得很好,除非我对 CSS 文件进行更改,Next.js 不会重新构建应用程序。我有点明白这一点,因为它可能不会查看 CSS 文件的更改。但是,我不能做任何事情来使 Next.js 用这些更改重建。我试过改变和保存_app.js。我得到了重建,但不包括更改。我可以删除该.next文件夹并且有效。这是我的包含的样子:

知道可能出了什么问题吗?

0 投票
1 回答
628 浏览

reactjs - 如何在 Next.js styled-jsx 中使用 jest 覆盖?

我正在尝试将测试框架 Jest 与 Next.js 和 styled-jsx 一起使用。

这是我的外部 CSS 样式。

这是我的 package.json 脚本。它运作良好。

我想使用覆盖选项。所以我尝试了这个"test": "jest --coverage --verbose",但它不起作用。

ReferenceError:未定义 css

我已阅读此https://github.com/zeit/styled-jsx/issues/436。但是,问题仍然存在,对我没有帮助。

我该如何解决?

0 投票
0 回答
482 浏览

reactjs - 如何在 NextJS 中验证 / lint styled-jsx?

我正在使用 nextJS 进行开发,让stylelint验证我的.scss.css文件。我也在使用styled-jsxorcss-in-js组件级样式(这是一种要求)并且想知道styled-jsx下面是否有一些库要验证是我的 css 代码的代码示例。

我试过使用这个库,但它只适用于如下静态样式:

0 投票
0 回答
2057 浏览

css-animations - 关键帧和动画在 Next js 中根本不起作用

我在 Next.js 中使用样式化的 jsx 来设置我的组件的样式,并且很多时候我发现自己在努力让动画正常工作。

所以我创建了下面的示例来演示问题,即动画和关键帧似乎在样式化的 jsx 中不起作用所以我的问题是我对吗?如果我是,那么是否有一种解决方法可以为我的组件使用动画和关键帧?

这是我的动画组件,它应该显示一个从红色到黄色的简单动画

这是我根本没有包含动画并显示静态红色框的结果!

在此处输入图像描述

0 投票
1 回答
263 浏览

jestjs - 使用 styled-jsx,我如何用酶测试风格?

我正在使用带有 styled-jsx 的 Next.js,测试酶 + 玩笑。

我想测试道具样式,但我不知道如何测试。

index.js

样式.js

我试图以这种方式进行测试,但它不起作用。

有没有办法解决这个问题?

0 投票
0 回答
1178 浏览

javascript - styled-jsx/webpack 和自定义 webpack.config.js 的问题

信息:我在这个项目中没有使用 NextJS。

当我启动我的 devSever 时,正如我在标题中提到的那样,我遇到了styled-jsx/webpack的问题。当我尝试向 CSS 中添加关于 scoped styled 的新规则时,我收到错误styled-jsx/css: if you are getting this error it means that yourcsstagged template literals were not transpiled.

我尝试使用以下主题修复我的配置:

https://github.com/zeit/styled-jsx/issues/537
https://github.com/zeit/styled-jsx/issues/498
https://github.com/zeit/styled-jsx/issues/ 469#issuecomment-423243758
https://github.com/zeit/styled-jsx/issues/434#issuecomment-415801021

但它在我的情况下不起作用,我不知道我做错了什么。

我的 webpack 配置:

我还尝试在相同的规则中添加这个 styled-jsx/webpack 加载器babel-loader(也使用 style-loader 和 css-loader),但它也不起作用。像这样:

.babelrc

当从 css 导入样式(如对象)并将它们放入 {styles} 时,我希望有一个作用域的 css 样式。

你对我应该做什么有什么建议吗?