为什么MUI Linear Progress 不接受绝对定位？

Question

当我设置绝对定位后，我的 MUI 线性进度条消失了

export default function LinearDeterminate() {
    const [ progress, setProgress ] = React.useState(0);

    React.useEffect(() => {
        const timer = setInterval(() => {
            setProgress((oldProgress) => {
                if (oldProgress === 100) {
                    return 0;
                }
                const diff = Math.random() * 10;
                return Math.min(oldProgress + diff, 100);
            });
        }, 500);

        return () => {
            clearInterval(timer);
        };
    }, []);

    return (
        <Box sx={{ width: '100vw', height: '100vh' }}>
            <LinearProgress sx={{ position: 'absolute', top: '100px' }} variant="determinate" value={progress} />
        </Box>
    );
}

但是如果去掉绝对定位，线性进度就ok了

Link 到 Code SandBox 实验：

https://codesandbox.io/s/mui-linear-progress-position-absolute-2t2dl

我可能遗漏了什么？

拉斐尔

Answer 1

因为您没有指定水平位置，元素的宽度变为 0。在 LinearProgress 组件上指定 left 和 right 值以确保元素具有宽度并且可见。

Link 到 Code SandBox 有几个例子： https://codesandbox.io/s/pensive-wind-fycivk

为什么MUI Linear Progress 不接受绝对定位？

Why do MUI Linear Progress doesn't accept absolute positioning?

absolute

reactjs

material-ui