JS 中的 CSS

¥CSS-in-JS

Examples

• Styled JSX

• 样式组件

  ¥Styled Components

• Emotion

• Linaria

• Styletron

• Cxs

• Fela

• Stitches

可以使用任何现有的 CSS-in-JS 解决方案。最简单的方法是内联样式：

¥It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:

我们打包了 styled-jsx 以提供对独立作用域 CSS 的支持。目标是像 Web 组件一样支持 "影子 CSS"，但不幸的是，它不支持 不支持服务器渲染，仅支持 JS。

¥We bundle styled-jsx to provide support for isolated scoped CSS. The aim is to support "shadow CSS" similar to Web Components, which unfortunately do not support server-rendering and are JS-only.

其他流行的 CSS-in-JS 解决方案（例如 Styled Components）请参阅上述示例。

¥See the above examples for other popular CSS-in-JS solutions (like Styled Components).

使用 styled-jsx 的组件如下所示：

¥A component using styled-jsx looks like this:

更多示例请参见 styled-jsx 文档。

¥Please see the styled-jsx documentation for more examples.

禁用 JavaScript

¥Disabling JavaScript

是的，即使你禁用 JavaScript，CSS 仍会在生产版本 (next start) 中加载。在开发过程中，我们需要启用 JavaScript，以便为 快速刷新 提供最佳的开发者体验。

¥Yes, if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh.