调整 Material UI CircularProgress 的大小

Question

我想将 Material UICircularProgress组件显示为几乎填满未知大小的父 div 所需的大小。比方说，尺寸应该是0.8 * min(parent_height, parent_width)。我尝试过愚弄max-width什么的，但没有成功。

我可以使用一些useDimension钩子来测量父母的尺寸，但我认为这是最后的手段。一定有一个纯 CSS 解决方案，对吗？

Answer 1

这次聚会有点晚了，但我有一个类似的问题，但没有父级约束（我有特定的父级大小）。对于任何人发现这个问题更简单的情况，你可以使用：

<CircularProgress size="1rem" />

就我而言

<CircularProgress size="1rem" color="inherit" />

Answer 2

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

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 元素查询也可以解决这个问题