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

Inline CSS styles in React: how to implement media queries?

本文关键字：何实现 实现 查询 媒体 样式 CSS React      更新时间：2023-09-26

我很喜欢React中的内联CSS模式（视频），我正在考虑使用它。然而，我有一个类似的问题。

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

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

虽然内联CSS对于大多数可以应用于键值对的样式属性来说都很好，但它并不能完全取代专用样式表。

编辑：

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

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

如果没有样式表，就无法执行媒体查询和伪元素之类的操作。但是，您可以访问它们在JavaScript中构建的信息。例如，一个调整大小的mixin:的天真实现

var ResizeMixin = {
    componentDidMount: function(){
        window.addEventListener('resize', this._resize_mixin_callback);
    },
    _resize_mixin_callback: function(){
        this.setState({
            viewport: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        });
    },
    componentWillUnmount: function(){
        window.removeEventListener('resize', this._resize_mixin_callback);
    }
};

然后，您可以将其包含在组件中，并获得如下渲染：

render: function(){
  var style;
  if (this.state.viewport.width > 900) {
    style = {width: '45%', margin: '2.5%'};
  }
  else {
    style = {width: '100%', margin: '0'};
  }
  ...
}

我不确定这是个好主意，但它是可以做到的。

我所说的"天真实现"是指它存在性能问题。addEventListener实际上相当重，所以您希望将其封装在一个简单的js事件发射器中。您也可以只拥有视口对象的一个实例来节省一些GC压力。您希望对事件进行节流，因为浏览器在拖动窗口时会很快发出事件。

与所有好的抽象一样，您可以在有空闲时间时进行这些优化，并且不需要使用它修改组件。

React Responsive将允许您使用媒体查询的特定用例。

它允许您使用媒体规范包装react元素。只有在满足媒体规范的情况下，才会呈现封装的元素。它不是一个通用的解决方案，因为它不允许您添加任意的css属性。

在以下方便的步骤中为我工作：

  1. 在mediacss文件中为您想要的项目设置一个类，例如

    @media (max-width: 768px){
.sidebar-show{
    display: block;
 }
 .sidebar-hide{
    display: none;
 }}

  2. react中的条件呈现，例如：（例如，showSideBar是状态变量）

    <aside className={`col-md-3 ${showSideBar?"sidebar-show":"sidebar-hide"}`}>

我参加聚会迟到了，但我仍然希望我能帮忙。您可以使用"；useMediaQuery"；钩子，然后如果钩子返回true，则动态应用内联样式。

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);
  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);
  return matches;
}
export default useMediaQuery;

您只需导入radium包并使用StyleRoot组件，就可以将媒体查询与radium包一起使用。

import Radium, { StyleRoot } from 'radium';

但是请记住，您不能直接在StyleRoot下使用媒体查询

，您必须将StyleRoot的内容放在一个单独的组件

上
相关文章：