Блог

Задача: Создать селектор братьев и сестер в функции в стиле material-ui@v5.

 .root   .root {  margin-top: 8px; }  

Добиться того же с material-ui@v4 makestyles просто. Взгляните на приведенный ниже код:

 root: {  width: '100%',  'amp;   $root': {  marginTop: spacing(1),  },  },  

но у меня нет успеха с новым api mui для styled(). Я попробовал несколько альтернатив, что-то вроде этого создаст такой код.

 const Root = styled(Box)(({ theme: { spacing } }) =gt; ({  [`amp;   .${Root}`]: {  marginTop: spacing(1),  }, }));  lt;style data-emotion="css" data-s=""gt;.css-43e1lt .NO_COMPONENT_SELECTOR{margin-top:8px;}lt;/stylegt;  

Комбинируя селектор родственных связей emotion с функцией в стиле mui, вот как мы можем заставить его работать.

 const Root = styled(Box)(({ theme: { spacing } }) =gt; ({  'amp;   amp;': {  marginTop: spacing(1),  }, }));