Кнопки в стиле Material-UI справа

Question

Как вы выровняете кнопки справа с помощью функции makeStyles Material-UI?

Я пытался использовать тег CSS 'margin-right: 0, но есть ошибка с использованием' - 'с makeStyles. Я переименовал его в 'marginRight', и он все еще не работает. Также mr: 0 также недействительно. (Используя интервал Material-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

Я бы предложил использовать для этого flexbox или просто использовать панель приложений, предоставленную уже материалом ui

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

, если вы все еще как использовать Box, просто отредактируйте стили titleBar таким образом и добавьте элемент spacer для разделения элементов на крайний правый или крайний левый

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>

Answer 2

Изменение,

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

Рабочие коды и коробка