右侧 Material-UI 风格的按钮

Question

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

我尝试过使用 CSS 的margin-right: 0标签，但是在 makeStyles 中使用“-”时出现错误。我将其重命名为“marginRight”，但它仍然不起作用。也mr: 0无效。（使用 Material-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>
  );
};

工作代码沙盒