html - 调整 MUI CircularProgress

Question

我想展示 MUI CircularProgress组件大到几乎填满未知大小的父 div。比方说，大小应该是0.8 * min(parent_height, parent_width) .我试着和 max-width 开玩笑以及任何没有成功的事情。
我可以使用一些 useDimension钩住并测量 parent 的大小，但我认为这是最后的手段。必须有一个纯 CSS 解决方案，对吗？

Answer 1

像这样的东西对你有用吗？这将依赖于为父级分配固定的宽度和高度(我的代码中缺少)，但您的问题暗示您就是这种情况。

export default function Demo() {
  const [parentSize, setParentSize] = useState(0);
  const parentRef = useRef(null);

  useEffect(() => {
    const { clientHeight, clientWidth } = parentRef.current;

    setParentSize(Math.min(clientHeight, clientWidth));
  }, []);

  return (
    <div ref={parentRef}>
      <CircularProgress size={0.8 * parentSize} />
    </div>
  );
}

我不是 100% 确定，但我认为 CSS Element Queries也可以解决这个问题