justifyContent с createStyles в TypeScript - PullRequest
Новая
       6

justifyContent с createStyles в TypeScript

0 голосов
/ 04 апреля 2020

У меня есть панель инструментов, где я использую 2 иконки, которые появляются с левой стороны. В настоящее время я использую этот метод стилей: 

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight: {
      marginRight: 0,
      right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
    // justifyContent: spaceBetween,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);

Я хочу, чтобы значки отображались справа. Если я добавлю отдельный css файл с этим, он будет работать: 

.toolbar-class{
    justify-content:space-between;
    }

, но я хочу использовать его внутри createStyles. В createStyles нет опции «пробел». Вот так выглядит часть моего компонента: 

<AppBar position="fixed" className={classes.appBar}>
        <Toolbar className="toolbar-class">
          <Typography variant="h6" noWrap>
            Al
          </Typography>
          <div className="panelheaderRight">
            <NotificationsIcon />
            &nbsp;&nbsp;
            {/* <ExitToAppIcon onClick={() =>
            <ExitToAppIcon onClick={logout}></ExitToAppIcon>
          </div>
        </Toolbar>
      </AppBar>

Можно ли как-нибудь переместить значки влево, используя createStyles и без добавления отдельного файла css?

1 Ответ

1 голос
/ 05 апреля 2020

Некоторые примечания:

  • Измените justify-content на justifyContent и укажите значение в виде строки.

  • Нет необходимости использовать createStyels для makeStyles

const useStyles = makeStyles((theme: Theme) => ({
  toolBar: {
    justifyContent: 'space-between'
  },
  ...
...

<Toolbar className={classes.toolBar}>
...