'&> *' в стилях React

Question

У меня есть следующий код:

const useStyles = makeStyles(theme => ({
  row: {
    '& > *': {
      fontSize: 12,
      fontWeight: 'bold',
      color: 'rgba(33,34,34,0.5)',
      letterSpacing: 0.5,
      lineHeight: '16px',
    },
  },
}));

кто-нибудь может объяснить мне, что означает эта строка:

'& > *': {

Оцените.

Answer 1

> - это дочерний комбинатор в CSS

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

* - универсальный селектор in CSS.

Выбирает все элементы. При желании он может быть ограничен определенным пространством имен c или всеми пространствами имен.

& - это родительский селектор в S CSS

В CSS -in- JS он может ссылаться на текущий селектор компонентов

Родительский селектор, &, является специальный селектор, изобретенный Sass, который используется во вложенных селекторах для ссылки на внешний селектор

Поскольку React-Material-UI использует JSS в своей реализации, такой синтаксис возможен.

Таким образом, в сочетании всего вышеперечисленного, & > * означает: применить CSS для всех типов элементов для всех прямых дочерних элементов текущего родителя