Блог

Главная - Вопросы по программированию - У меня возникли проблемы с переопределением material-корневого стиля пользовательского интерфейса для DialogActions

У меня возникли проблемы с переопределением material-корневого стиля пользовательского интерфейса для DialogActions

#css #reactjs #material-ui

#css #reactjs #material-ui

Вопрос:

У меня есть две кнопки в диалоговых действиях, подобные этому.

JSX, который у меня есть, следующий:

 <DialogActions classes={{ root: classes.dialogActionsLeft }}>
  <Button
    autoFocus
    onClick={() => {
      setOpen(false);
    }}
  >
    Cancel
  </Button>
  <Button
    onClick={() => {
      setOpen(false);
      navigate("/");
    }}
  >
    Finish
  </Button>
</DialogActions>

И CSS, который у меня есть, это:

 const useStyles = makeStyles((theme) => ({
  dialogActionsLeft: {
    "amp;:nth-child(1)": {
      justifyContent: `flex-start`
    }
  }
}));

Если псевдоселектора там нет, обе кнопки будут выровнены по левому краю, а если он есть, обе кнопки останутся выровненными по правому краю. Это говорит мне, что я неправильно использую псевдоселектор, но я не могу понять, как это исправить

Ответ №1:

Вам нужно выровнять обе кнопки по левому краю? Если это так, попробуйте amp;:nth-child(n) .

Обновить

Вы также должны указать justifyContent для dialogActionsLeft .

 dialogActionsLeft: { justifyContent: 'space-between', 'amp;:nth-child(1)': { justifyContent: flex-start, } }

Комментарии:

1. Нет, мне нужно, чтобы первая кнопка была выровнена по левому краю, а вторая кнопка выровнена по правому краю.

2. Вы также должны указать justifyContent для dialogActionsLeft . ` dialogActionsLeft: { justifyContent: ‘пробел между’, ‘amp;:n-й дочерний элемент (1)’: { justifyContent: flex-start , } }`

3. Рад это слышать. Я отредактировал свой ответ. Если вы можете, примите это как ответ. Если нет, не беспокойтесь.

Метки: