Html 调整MUI循环进程的大小

我想显示MUI

CircularProgress

组件，该组件的大小与填充未知大小的父div所需的大小相同。比如说，大小应该是

0.8*min（父级高度、父级宽度）

。我试图愚弄

max width

和任何东西，但没有成功

---

我可以使用一些<代码>使用维度< /Cord>钩子并测量父级的大小，但我认为这是最后一招。必须有一个纯CSS的解决方案，对吗？

您需要这样的解决方案吗？这将依赖于父对象被指定一个固定的宽度和高度（这在我的代码中是缺失的），但您的问题意味着您的情况就是这样

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>
  );
}

导出默认函数Demo（）{
const[parentSize，setParentSize]=useState（0）；
const parentRef=useRef（null）；
useffect（（）=>{
const{clientHeight，clientWidth}=parentRef.current；
setParentSize（Math.min（clientHeight，clientWidth））；
}, []);
返回(
);
}

我不是百分之百确定，但我想这也能解决问题