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

Question

My MUI Linear Progress bar disappears when I set absolute positioning to it

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

But if I get rid of the absolute positioning, the linear progress appears ok

Link to Code SandBox with the experiment:

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

What could I be missing?

Rafael

Answer 1

Because you aren't specifying a horizontal position, the element's width goes to 0. Specify a left and right value on the LinearProgress component to ensure that the element has a width and is visible.

Link to Code SandBox with a couple examples: https://codesandbox.io/s/pensive-wind-fycivk