Что означает тег «&> *»? Используется в функциях useStyles - PullRequest
Новая
       20

Что означает тег «&> *»? Используется в функциях useStyles

0 голосов
/ 14 февраля 2020

Я некоторое время использую React с Material-UI и заметил, что в некоторых примерах, когда они используют useStyle, они создают класс с именем root, а затем используют этот тег & > *. Я попытался найти, что это значит, но это трудно найти.

Здесь следует примеру из их документации: 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    '& > *': {
      margin: theme.spacing(1),
      width: theme.spacing(16),
      height: theme.spacing(16),
    },
  },
}));

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper />
    </div>
  );
}

1 Ответ

1 голос
/ 14 февраля 2020

В sass & позволяет вам 'цеплять' css селекторы, в обычном css > означает прямого потомка, поэтому, если вы только пытались нацелиться на верхний уровень div s внутри чего-то, что вы могли бы используйте > например 

// css
article > div {
  font-size: 40px;
}

// html
<article>
  <div>
    Heading // this is 40px because this div is a direct descendant of article
    <div>
      Some content // this is unaffected because it's two levels away from article
    </div>
  </div>
  <div>
    Another heading // this is also 40px big, because it is only one level deep in article
  </div>
</article>

, а селектор * означает все

Так что в приведенном вами примере .root & > * или просто .root > * означает, что каждый прямой элемент-потомок к классу root будут применены эти стили, но элементы внутри них не будут.

...