In MUI, what does '& > *' mean?

Question

I'm currently working on building an website with React. I paid for a Material-UI React template for this, and I found these codes below and cannot understand the part of '& > *' in line 4.

Is it just a name of a property or does it mean something else?

const useStyles = makeStyles((theme) => ({
    card: {
        maxWidth: '475px',
        '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
        },
        [theme.breakpoints.down('sm')]: {
            margin: '20px'
        },
        [theme.breakpoints.down('lg')]: {
            maxWidth: '400px'
        }
    },
    content: {
        padding: `${theme.spacing(5)} !important`,
        [theme.breakpoints.down('lg')]: {
            padding: `${theme.spacing(3)} !important`
        }
    }
}));

All first level children of card – Cornel Raiu Nov 04 '21 at 08:44 — Cornel Raiu, Nov 04 '21 at 08:44
To choose all the children you can use : "& > *" – Kapilrc Nov 10 '21 at 13:34 — Kapilrc, Nov 10 '21 at 13:34

score 2 · Accepted Answer · answered Nov 04 '21 at 08:47

The sign & related to css compiler, like scss. The * means all, as the sign > means direct child.

Basically, it will refer to the element you are in his scopes, this case:

// element card
card: {
        maxWidth: '475px',

        // all direct children of the element card
        '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
        },
}

score 0 · Answer 2 · answered Nov 04 '21 at 08:50

The greater than sign (>) selector in CSS is used to select the element with a specific parent. It is called as element > element selector. It is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. It looks only one level down the markup structure and not further deep down. Elements which are not the direct child of the specified parent is not selected.

The & character basically means “this”. Here's some examples:

a { color:#ff0000; &:hover { color:#0000ff; } } Will be compiled into: a { color:#ff0000; } a:hover { color:#0000ff; }

Harutyun Harutyunyan · Answer 3 · 2021-11-04T09:24:32.843

0

// Selects all elements where the parent is a <card> element
card: {
        '& > *': {
            flexGrow: 1,
            flexBasis: '50%'
        }
}

//this same as 

card > * {
    flex-grow: 1;
    flex-basis: 50%;
}

edited Nov 04 '21 at 09:24

answered Nov 04 '21 at 09:12

Harutyun Harutyunyan

94
5

In MUI, what does '& > *' mean?

3 Answers3