I am trying to move a button in my appbar to the right. Here is what it looks like:

I have tried 2 ways to fix this:
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;
I also tried to do the same thing with a useStyles hook:
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;
But none of them have worked and the button won't move to the right.
The code of my button component is as follows:
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;