问题标签 [css-in-js]

Theme-UI有许多内置组件。但它们都是“简单”的组件。也就是说，没有选项卡、手风琴、可排序表或其他具有更“复杂”功能的组件。

我正在寻找其他组件库的建议，这些组件库具有该功能，但可以与 theme-ui 很好地同步。也就是我想用theme-ui的theme和sx prop，但是要具备另外一个组件库的功能。

有什么建议么？

谢谢。

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

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

我正在尝试在利用 Emotion 及其Global component的 React 项目中使用本地托管的字体。此方法适用于网络字体，例如Google Fonts，但是当我下载相同的字体并尝试使用 将其作为本地.ttf文件应用时@font-face，我无法获得相同的结果。

这是重要的文件，App.js：

出于某种原因，文本中的文本FromGoogle使用 Google 字体很好，而来自的文本FromLocal则没有。我的第一个想法是这是路径的问题，但如果是，我无法判断。

这是GitHub 上的完整项目。我使用了 Create React App，并删除了所有不相关的样板。

在 Emotion v10 中，文档说“如果你从 @emotion/css/macro 导入它，那么 @emotion/core 有一个可用于 css 的 Babel 宏。” 这显然适用于无法更改其 babel 配置的用户。

假设你没有使用 JSX pragma 或 babel 插件，这个宏有什么意义，你如何使用它？

在一个新的create-react-app应用程序中，我可以import css from '@emotion/css/macro';，甚至使用css标记模板，但是我应该如何处理它的返回值（一个带有name和样式文本的对象）并不明显。如果没有编译指示或插件，我将无法访问css={}道具。

用js写一个内联样式，

并在 JSX 中使用它，如下所示

使用“样式化组件”编写样式，

并像使用它一样，

这里使用 css-in-js 库和使用内联样式有什么区别。

now现在从 zeit 运行时出现此错误：

我不明白为什么会出现此错误，就像它无法识别width. 我曾经yarn安装软件包。如您所见，它是一个打字稿应用程序，使用 BaseUI(Uber) UI 框架。

以下是组件代码：

我开始使用 React 和 Material UI，我遇到了样式。他们使用一种叫做 CSS-in-JS 的东西。对于在 JavaScript 中使用 camelCase 而不是 kebab-case 的属性有点困惑。

在下面的链接CSS 属性参考中，我们可以看到所有与 CSS 属性等效的 JavaScript。我的问题是，我们是否仅限于 JavaScript 等价物的列表？我们可以为它的 CSS 对应物 column-rule-style 做类似 columnRuleStyle 的事情吗？

请让我知道你在想什么。谢谢您的帮助！

找不到一个清晰的例子，如何在 .css 对象中使用函数styled-components。它不会引发错误，但在提取道具时不会将背景添加到 CSS 输出中，如下例所示。

作品- css

工作- css 对象

不工作- css 对象

我是 NextJS 的新手，在获取全局样式以应用于其他页面时遇到问题。我是否使用了错误的全局选择器？您可以在下面找到我的 index.js 和 add-article.js 文件，其中包括两个显示仅应用于主页的全局样式的图像。

下面是我的index.js文件：

添加-article.js

主页

其他页面

我试图仅在悬停到特殊 div 时显示一些信息。我正在使用材质 ui 及其 withStyles 组件。有没有办法做到这一点？