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

中的 child combinator

The > combinator selects nodes that are direct children of the first element.

* 是 CSS 中的 universal selector。

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

& 是 SCSS

中的 a parent selector

In CSS-in-JS it may refer to the current component selector

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector

由于 React-Material-UI 在其实现中使用了 JSS，所以这样的语法是可能的。

所以结合以上所有内容，& > * 意味着：对所有当前父级的直接子级的所有元素类型应用 CSS

React 样式中的 '& > *'

'& > *' in React's styles

javascript

css

styling

reactjs

material-ui