调整材料 UI 循环进度的大小

Question

我想向材质 UI 显示组件CircularProgress尽可能大，以几乎填充未知大小的父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 元素查询也可以解决这个问题

Answer 3

这不可能是官方方式。但是，当一切不正常时，您可以将其用作一个小技巧。

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

调整填充以调整大小并调整边距以定位。