右侧的材质UI样式按钮

Question

如何使用Material UI的makeStyles函数对齐右侧的按钮？

我尝试过使用CSS的margin-right: 0标记，但在makeStyles中使用"-"时出错。我把它改名为"marginRight"，但它仍然不起作用。此外，mr: 0也无效。(使用材质UI的间距(。

代码试图使UI类似于stackOverflow的标题布局。

import React from 'react';
import { makeStyles } from "@material-ui/core/styles";
import { Box, Button } from "@material-ui/core";
const style = makeStyles({
titleItemRight: {
color: 'white',
backgroundColor: 'blue',
top: '50%',
height: 30,
align: 'right',
position: 'relative',
transform: 'translateY(-50%)',
}
});
const App = () => {
const classes = style();
return (
<div>
<Box className={classes.titleBar}>
<Button variant='text' className={classes.titleItemRight}>Sign In</Button>
</Box>
</div>
);
};

Answer 1

更改，

align: 'right'

收件人，

float: 'right'

所以代码看起来像

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Box, Button } from "@material-ui/core";
const style = makeStyles({
titleItemRight: {
color: "white",
backgroundColor: "blue",
top: "50%",
height: 30,
float: "right",
position: "relative",
transform: "translateY(-50%)"
}
});
const App = () => {
const classes = style();
return (
<div>
<Box className={classes.titleBar}>
<Button variant="text" className={classes.titleItemRight}>
Sign In
</Button>
</Box>
</div>
);
};

工作代码沙盒

Answer 2

我建议使用flexbox，或者只使用材料ui 已经提供的AppBar

https://material-ui.com/components/app-bar/#app-条形

如果你仍然想使用Box，只需以这种方式编辑标题栏样式，并添加一个间隔元素将元素分隔到最右边或最左边的

const style = makeStyles({
titleBar: {
display: 'flex',
width:'100%',
flexFlow: 'row',
},
spacer: {
flex: '1 1 auto'
}
});

然后你的组件

<Box className={classes.titleBar}>
<LogoHere/>
<div className={classes.spacer}/>
<Button variant="text">
Sign In
</Button>
</Box>