[test] Always use & for nesting styles (#35702)

mui · Jan 2, 2023 · 3aa4722 · 3aa4722
1 parent a526207
commit 3aa4722
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/mui-system/src/Box/Box.spec.tsx b/packages/mui-system/src/Box/Box.spec.tsx
@@ -48,7 +48,7 @@ function ComponentPropTest() {
 
 function ThemeCallbackTest() {
   <Box sx={{ background: (theme) => theme.palette.primary.main }} />;
-  <Box sx={{ ':hover': (theme) => ({ background: theme.palette.primary.main }) }} />;
+  <Box sx={{ '&:hover': (theme) => ({ background: theme.palette.primary.main }) }} />;
   <Box sx={{ '& .some-class': (theme) => ({ background: theme.palette.primary.main }) }} />;
   <Box maxWidth={(theme) => theme.breakpoints.values.sm} />;
 }

diff --git a/packages/mui-system/src/createBox.spec.tsx b/packages/mui-system/src/createBox.spec.tsx
@@ -50,7 +50,7 @@ function ComponentPropTest() {
 
 function ThemeCallbackTest() {
   <Box sx={{ background: (theme) => theme.palette.primary.main }} />;
-  <Box sx={{ ':hover': (theme) => ({ background: theme.palette.primary.main }) }} />;
+  <Box sx={{ '&:hover': (theme) => ({ background: theme.palette.primary.main }) }} />;
   <Box sx={{ '& .some-class': (theme) => ({ background: theme.palette.primary.main }) }} />;
   <Box maxWidth={(theme) => theme.breakpoints.values.sm} />;
 }
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
@@ -276,12 +276,12 @@ describe('styleFunctionSx', () => {
       const result = styleFunctionSx({
         theme,
         sx: {
-          ':hover': (t) => ({ background: t.palette.primary.main }),
+          '&:hover': (t) => ({ background: t.palette.primary.main }),
         },
       });
 
       // Test the order
-      expect(result).to.deep.equal({ ':hover': { background: 'rgb(0, 0, 255)' } });
+      expect(result).to.deep.equal({ '&:hover': { background: 'rgb(0, 0, 255)' } });
     });
 
     it('works on nested selectors', () => {