Блог

Главная - Вопросы по программированию - Как использовать селектор CSS > в пользовательском интерфейсе материалов

Как использовать селектор CSS > в пользовательском интерфейсе материалов

#reactjs #material-ui

Вопрос:

Я использую пользовательский интерфейс Material и пытаюсь переопределить некоторые css из элемента сетки с помощью стилей, в которых есть этот селектор:

 .MuiGrid-spacing-xs-2 > .MuiGrid-item

Если я нацеливаюсь на элемент со стилем, он переопределяется указанным выше селектором из-за его специфичности.
Я попробовал использовать «интервал-xs-2».:

 const CustomGrid = withStyles({
  'spacing-xs-2 > item': {
    marginLeft: '22px',
    top: '-6px',
    backgroundColor: 'lightgrey',
    padding: '0px 10px 0px 0px',
    borderRadius: ' 5px',
  },
})(Grid);

но не работает.
Как я могу использовать селектор > в пользовательском интерфейсе материала?

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

1. Почему бы вам просто не добавить имя класса к этому элементу и не придать ему стиль?

2. Потому что. MuiGrid-интервал-xs-2 > .MuiGrid-элемент все равно переопределит его

3. Если вы хотите переопределить некоторые основные элементы в пользовательском интерфейсе Material, вам нужно использовать тему там, здесь у вас есть ссылка для этого — material-ui.com/customization/theming

Ответ №1:

Это сработало бы, но я бы подошел к этому иначе

 const CustomGridItem = withStyles({
  item: {
    '.MuiGrid-spacing-xs-2 > amp;': {
      // your styles
    }
  }
})(Grid);

Вместо этого вы можете просто повысить специфику правил стиля вашего класса

 const useStyles = makeStyles({
  item: {
    marginLeft: 22,
    top: -6,
    backgroundColor: "lightgrey",
    borderRadius: 5,
    "amp;amp;": { // => .makeStyles-item.makeStyles-item
      padding: "0px 10px 0px 0px"
    }
  }
});
 
 <Grid item className={classes.item}>
  // content
</Grid>
Метки: