(MUI v5) Unable to place button on the top right corner-CodePudding

I tried to place a MUI button on the top right corner, for some reasons I was not able to move the button at all unless using ml & mr, which is not the ideal case for my project.

import './NavigationPage.css'
import * as React from 'react';
import videoBg from '../assets/videos/japan_bg2kTrim.mp4'
import IconButton from '@mui/material/IconButton';

function NavigationPage() {

 const [muted, setMuted] = React.useState(true);
 const handleToggleMute = () => setMuted(current => !current);

 return (
   <div>
     <IconButton variant='contained' onClick={handleToggleMute} 
       sx={{ display: 'flex', justifyContent: 'flex-end'}}>Unmute</IconButton>
     <video src={videoBg} autoPlay loop muted={muted}/>
   </div>
 );
}

export default NavigationPage;

My css:

* {
  margin: 0;
  padding: 0;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

video {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  position: fixed;
  z-index: -1;
}

Anybody has an idea of putting the button on the corner without using margin?

CodePudding user response：

The property display: flex won't do anything to your IconButton as it only creates a flex box and affects the child elements. justifyContent affects the child elements of the flex box as well.

So I suggest using a position: fixed as below:

<IconButton variant='contained' onClick={handleToggleMute} 
   sx={{ position: "fixed", top: 0, right: 0, zIndex: 2000 }}>Unmute</IconButton>

You can adjust the top and right values to set the margin you like.