CSS 条件样式（如果组件的最大宽度为：600px）

Question

不是屏幕，如果组件宽度为 600px，我想应用此 如果组件位于模态中，我正在尝试更改一些样式，我只想将弯曲方向从列更改为行反向，因此我看不到执行另一个组件的意义 我的代码

const wrapper = styled.div`
  display: flex;
  flex-direction: column;
  @media screen and (max-width: 600px) {
      flex-direction: row-reverse;
  }
}
`

这显然不是，因为它正在检查屏幕

Answer 1

您需要测量

div

HTML 节点来检查其宽度，看看它是否小于或等于 600 像素。

这是一个使用包装器组件来测量样式化

div

元素的示例实现：

自定义钩子，通过 React ref 测量 DOMNode 并返回其宽度。

const useElementWidth = () => {
  const ref = useRef();
  const [width, setWidth] = useState();

  useEffect(() => {
    const handler = () => {
      setWidth(ref.current.getBoundingClientRect().width);
    };

    handler();

    window.addEventListener("resize", handler, true);
    return () => {
      window.removeEventListener("resize", handler, true);
    };
  }, []);

  return {
    ref,
    width
  };
};

当满足“媒体查询”条件时附加引用并设置 CSS 类名的包装器。

import { clsx } from "clsx";

const Wrapper = (props) => {
  const { ref, width } = useElementWidth();

  return (
    <InnerWrapper
      ref={ref}
      className={clsx({ mobile: width <= 600 })}
      {...props}
    />
  );
};

原始

div

样式组件。

const InnerWrapper = styled.div`
  display: flex;
  flex-direction: column;

  &.mobile {
    flex-direction: row-reverse;
  }
`;

600px以下的元素

超过 600 像素的元素

父元素中最大宽度为 700px 的元素