(MUI v5) 无法在右上角放置按钮

Question

我试图在右上角放置一个 MUI 按钮，由于某些原因我根本无法移动按钮，除非使用 ml & mr，这对我的项目来说不是理想的情况。

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;

我的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;
}

有没有人想过将按钮放在角落而不使用边距？

Answer 1

属性 display: flex 不会对您的 IconButton 做任何事情，因为它只会创建一个弹性框并影响子元素。 justifyContent 也会影响弹性框的子元素。

所以我建议使用 position: fixed 如下：

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

您可以调整顶部和右侧的值来设置您喜欢的边距。

(MUI v5) 无法在右上角放置按钮

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

html

css

frontend

reactjs

material-ui