Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does "& > :not(style)" do in Material UI v5?

Tags:

material-ui

This code is in the examples in the Paper component documentation:

import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';

export default function Variants() {
  return (
    <Box
      sx={{
        display: 'flex',
        '& > :not(style)': {
          m: 1,
          width: 128,
          height: 128,
        },
      }}
    >
      <Paper variant="outlined" />
      <Paper variant="outlined" square />
    </Box>
  );
}

link: https://mui.com/pt/material-ui/react-paper/

I wanted to understand what this sector "& > :not(style)" does.

like image 503
Elias Carvalho Avatar asked Oct 15 '25 21:10

Elias Carvalho


1 Answers

I think two things are worth clarifying.

Firstly, :not() represents elements that do not match a list of selectors, so '& > :not(style)': means that it applies to all children elements that have no 'style' attribute. If you add style to the first Paper component, e.g., it will be excluded from this CSS rule.

Another way is to use the * selector to apply to all children elements, like this: '& > *': . Since inline style has the highest precedence, this CSS rule defined in this way still won't apply to the first Paper component if it has its own style attribute.

like image 192
NancyG Avatar answered Oct 18 '25 01:10

NancyG



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!