如何使用 CSS 移动 React 组件？没有功能或 类 正在工作

Question

我正在尝试将应用栏中的按钮移到右侧。这是它的样子：

我尝试了两种方法来解决这个问题：

    return (
        <AppBar
            position="sticky">
            <Toolbar
                sx = {{background:'black', float:'right'}}
                variant="dense">
                    <CustomButton
                        text='Upload'
                        sx = {{float:'right'}}
                        endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>
    )
}
export default Header;

我也尝试用 useStyles 挂钩做同样的事情：

import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import { makeStyles } from '@material-ui/core/styles';
import {createMuiTheme} from '@material-ui/core/styles';
const useStyles  = makeStyles({
    root: {
        float:'right'
    }
});
const Header = () => {
    const classes = useStyles();
    return (
        <AppBar position="sticky">
            <Toolbar
                sx = {{background:'black'}}
                variant="dense">
                    <CustomButton text='Upload'
                                  className={classes.root}
                                  endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>
    )
}
export default Header; 

但是其中 none 个有效，按钮不会向右移动。

我的按钮组件代码如下：

import {Button} from '@material-ui/core';
import UploadIcon from '@mui/icons-material/Upload';

const CustomButton = ({float,text, endIcon}) => {

    return (
        <div className='CustomButton'>
            <Button style={{fontWeight: 'bold'}}
                    variant="contained"
                    size='small'
                    endIcon={endIcon}>
                {text}
            </Button>
        </div>
    )
}
export default CustomButton;

Answer 1

在工具栏上使用以下样式

display:flex;
justify-content:flex-end.

Answer 2

在mui中，你会用到很多flex。

return (
    <AppBar
        position="sticky">
        <Toolbar
            sx = {{background:'black', display: 'flex', justifyContent: 'flex-end'}}
            variant="dense">
                <CustomButton
                    text='Upload'
                    endIcon={<UploadIcon/>}/>
        </Toolbar>
    </AppBar>
)
}
export default Header;

从 mui v5 开始，也很高兴学习如何使用 Stack。

<Toolbar>
    <Stack direction="row" justifyContent="space-between">
         <MyLogo />   //extreme left
         <MyButton /> //extreme right
    </Stack>
</Toolbar>

堆栈也可以嵌套

<Toolbar>
    <Stack direction="row" justifyContent="space-between">
         <Stack direction="row"> // content in extreme left
              <MyLogo />   
              <MyOtherLeftComponent />
         </Stack>
         
         <MyButton /> //extreme right
    </Stack>
</Toolbar>