我想顯示所需大小的材質UI CircularProgress組件，以填充未知大小的父div。比方說，大小應該是0.8 * min(parent_height，parent_width)。我試圖愚弄最大寬度和任何沒有成功。

我可以使用一些舊的尺寸鉤，測量父母的大小，但我認為這是最后的手段。一定有純CSS的解決方案，我說的對嗎？

對這個聚會來說有點晚，但我有一個類似的問題，但沒有父約束(我有一個特定的父大小)。對于任何發現這個問題的人來說，你可以使用:

<CircularProgress size="1rem" />

對我來說

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

像這樣的東西對你有用嗎？這將依賴于為父節點分配一個固定的寬度和高度(這在我的代碼中是不存在的)，但是你的問題暗示了這就是你的情況。

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元素查詢也可以解決這個問題

這不可能是官方的方式。然而，當一切都不順利的時候，你可以把它作為一個小竅門。

<CircularProgress style={{padding: "10px"}} />

調整填充以調整大小，調整邊距以定位。