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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With