css - Material-UI style buttons on the right

Question

How do you align buttons on the right using Material-UI's makeStyles function?

I have tried using CSS's margin-right: 0 tag, but there is an error using '-' with makeStyles. I renamed it as 'marginRight' and it still does not work. Also mr: 0 is not valid either. (Using Material-UI's spacing).

The code is trying to make the UI similar to stackOverflow's title layout.

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>
  );
};

标签： cssreactjsmaterial-ui

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>
  );
};

工作代码沙盒