React 中的内联 CSS 样式：如何实现媒体查询？

Question

我非常喜欢 React 中的 内联 CSS 模式（ 视频），我正在考虑使用它。但是我有一个与 此类 似的问题。

如何使用 React 的内联 CSS 模式为应用程序实施媒体查询。

原文由 Paulo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不能。有一些 CSS 特性，例如 @media 查询，必须在样式表的 声明块 中定义。

虽然内联 CSS 非常适用于可以在键值对中应用的大多数样式属性，但它并不能完全替代专用样式表。

编辑：

某些浏览器（Chrome 9+、IE 10+、Firefox 6+）中提供了实验对象，允许您在文档的媒体查询更改时添加事件侦听器，例如 MediaQueryList 。

有一个名为 Radium 的新生 React 项目，它提供了基于活动媒体查询应用条件样式的 mixin，在引擎盖下使用 MediaQueryList 。

原文由 Mark 发布，翻译遵循 CC BY-SA 3.0 许可协议