问题标签 [styled-jsx]

我设置的变量 (bgColor,txtColor) 并没有始终如一地进入 styled-jsx。我附上了一个屏幕截图，您可以在其中看到 console.log 没有显示正在呈现的相同值。

我相信我没有得到关于 styled-jsx 的一些东西。不知道为什么这不起作用。

这是组件渲染错误的示例...

更新 深入挖掘。看起来有时它会将相同的生成 JSX 样式分配给应该是不同颜色的项目。关于为什么将其分配给同一类的任何想法？（附上图片）

背景：

GridPreview在接受“长度和宽度” ，App用于渲染子元素GridTilefor loop

怎么了

GridTile不应用组件内部的样式。

vscode 0 错误，0 警告。Webpack 编译成功。浏览器控制台 0 错误。

浏览器截图

反应开发工具截图

您好，所以我试图在切换元素时显示一个 div。函数和事件肯定有效，因为如果我删除样式，那么元素就会出现，但是当我添加它时，它就消失了，我实际上不知道为什么。当我添加时它消失了，position:absolute但即使我将高度和宽度设置为 100% 并且它没有跟随。这是我的沙盒。

这是我的CSS：

我会发布 JSX，但它们位于不同的页面中，可能更容易看到沙箱

谢谢！

使用 VSCode 时，在 React 的样式化 jsx 中未启用 PostCSS 语法突出显示。

我用了这个插件，但是没有用。

https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss

如果有人知道如何使语法突出显示起作用，我想知道如何使它起作用。

拜托，你能帮帮我吗？

我正在开发一个博客项目，其中一个要求是即使浏览器禁用了 javascript，该博客也能正常工作。当使用“https://github.com/dionatanaraujo/rollup-styled-jsx”项目“https://github.com/Tomekmularczyk/rollup-styled-jsx”的一个分支时，我们注意到禁用浏览器javascript时组件没有样式。

如何模拟错误：

1. 进入根项目并运行npm install，然后npm run build:prod
2. 进入demo工程cd demo运行npm install然后npm run dev
3. 访问浏览器 http://localhost:3000，进入设置并禁用 javascript。
4. 请注意，不会加载样式。

请问，此配置中是否存在错误或缺失，以便在禁用 javascript 时样式可以正常工作？

启用 js 的组件库（工作正常）：

禁用 js 的组件库（样式不起作用）：

/ demo 中的项目使用 Next.js 构建以与 SSR 一起使用。请，如果有人可以提供帮助，那将是非常有益的。

我正在尝试在 react 组件（使用 create react app 创建）中使用 styled-jsx 库。

但我得到了错误：

styled-jsx/css：如果您收到此错误，则表示您的css标记模板文字没有被转译。

我不确定如何解决它，或者无法使用这个用于反应组件的库（这是我第一次使用它）。

非常感谢！

自从我开始使用 NextJS，我就非常喜欢 styled-jsx（我知道，不是每个人都喜欢它）。我很想在我的创建反应应用程序中使用它。在本地它工作得很好。但是，反应向我显示了错误：

据我了解，这意味着代码不会被 babel 传递。我需要将 babel 插件添加到我的 Create React App Babel 配置中——如果不弹出，这是不可能的。

我也读过，react-app-rewired但我不相信它足以投入生产。styled-jsx在我的创建反应应用程序项目中是否有更原生的方式使用？

我正在尝试让 styled-jsx 在 NextJS 中与 tailwindcss 一起使用。

实时示例：https ://codesandbox.io/s/nextjs-blog-ts-tpl-z05b4?file=/src/pages/index.tsx

在上面的示例中，我试图<h1>Hello World</h1>在index.tsx页面上找到使用 tailwindcss 更改颜色。

例如，如果我将 styled-jsx 设置为@apply text-red-400;，我希望h1会变成红色，但它不会。我知道 styled-jsx 正在工作，因为将color: green;更改h1应用于绿色。

我尝试使用 babel 配置，styled-jsx-plugin-postcss但它不起作用。

Next.js 引入了 Image 组件。我想使用它，我目前正在努力寻找使用 styled-jsx 对其应用样式的方法。

这是我的尝试：

类名已正确传输到底层 dom 元素，但未应用样式。next.js Image 组件和 styled-jsx 之间是否存在某种不兼容？

我正在学习 Next.js——目前版本为10.0.3. 我正在使用react-bootstrap版本1.4.0和classnames版本2.2.6。

我正在使用一个组件Navbar（这是我到目前为止所拥有的：

问题在于，border-bottom并box-shadow没有应用于nav最终文档中生成的 HTML 标记。任何帮助将不胜感激。

我也尝试<style jsx>{``}</style>在同一个组件中使用（具有相同的样式）Header.tsx，但它也没有做任何事情。