无需使用@media，如何隐藏Chakra UI换行后的Flex容器右侧项？

要实现右侧项在即将换行时自动隐藏，且不使用@media规则或额外类，可以通过React状态结合元素宽度检测来实现，具体方案如下：

核心思路 #

放弃原有的Wrap组件（它默认会自动换行），改用Flex布局配合宽度检测：

1. 通过ref获取容器和左右项的实际宽度
2. 计算左右项总宽度（含间距）是否超过容器宽度
3. 动态控制右侧项的显示/隐藏状态，当总宽度超过容器时隐藏右侧项

实现代码 #

import { Flex, Box } from "@chakra-ui/react";
import React, { useRef, useEffect, useState } from "react";

type WrapperProps = {
  children: React.ReactNode;
};

const Wrapper: React.FC<WrapperProps> = ({ children }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const leftItemRef = useRef<HTMLDivElement>(null);
  const rightItemRef = useRef<HTMLDivElement>(null);
  const [showRightItem, setShowRightItem] = useState(true);

  useEffect(() => {
    const checkWrap = () => {
      if (!containerRef.current || !leftItemRef.current || !rightItemRef.current) return;

      const containerWidth = containerRef.current.offsetWidth;
      // 加上间距的1rem（换算为16px，可根据实际spacing调整）
      const totalItemWidth = leftItemRef.current.offsetWidth + rightItemRef.current.offsetWidth + 16;

      setShowRightItem(totalItemWidth <= containerWidth);
    };

    // 初始检测
    checkWrap();
    // 监听窗口 resize 事件，实时更新状态
    window.addEventListener("resize", checkWrap);
    return () => window.removeEventListener("resize", checkWrap);
  }, []);

  // 解构左右子元素
  const leftChild = Array.isArray(children) ? children[0] : null;
  const rightChild = Array.isArray(children) ? children[1] : null;

  return (
    <Flex 
      ref={containerRef}
      w="full" 
      justify="center" 
      gap="1rem" 
      py="1rem"
      flexWrap="nowrap"
    >
      <Box ref={leftItemRef} w="full" maxW="40rem">
        {leftChild}
      </Box>
      {showRightItem && (
        <Box ref={rightItemRef} w="full" maxW="18rem">
          {rightChild}
        </Box>
      )}
    </Flex>
  );
};

export default Wrapper;

关键说明 #

• 用Flex替代Wrap，设置flexWrap="nowrap"避免自动换行
• 通过offsetWidth获取元素实际渲染宽度，确保判断准确
• 监听窗口resize事件，保证窗口大小变化时状态实时更新
• 完全通过React状态控制显示，无需依赖媒体查询或额外CSS类

内容的提问来源于stack exchange，提问作者Tom Fan