Material UI Paper automatically expand size when i insert an element with negative margin

What I want to do is putting a sort of "container" on top of a Paper component, but the container should overflow the top of the Paper.

I attempted to do this by setting negative marginTop for container so it would overflow:

const useStyle = makeStyle({
   container:{marginTop:"-20px"}
});

const classes = useStyle();
return <Paper elevation={1}>
   //the 'container' i chose here is Button component
   <Button className={classes.container}>login</Button> 
   // and some other stuff we don't need to care.
</Paper>

It worked ok, but the container is not supposed to be clickable, so it shouldn't be a Button.

And for components other than Button ( i tried with Container,Grid,Paper,Card), the Paper will automatically resize the paper so it could keep the element inside, which is maybe a bug in Material.

Is there anyway, within the scope of Material ,to make this overflow possible? Any help would be appreciated.