add as const

mui · Aug 21, 2023 · 5bbe4bf · 5bbe4bf
1 parent b4bdbad
commit 5bbe4bf
Showing 1 changed file with 24 additions and 22 deletions.
diff --git a/packages/mui-joy/src/ListItem/ListItem.tsx b/packages/mui-joy/src/ListItem/ListItem.tsx
@@ -40,26 +40,28 @@ const useUtilityClasses = (ownerState: ListItemOwnerState) => {
 
 export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>(
   ({ theme, ownerState }) => [
-    !ownerState.nested && {
-      // add negative margin to ListItemButton equal to this ListItem padding
-      '--ListItemButton-marginInline': `calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))`,
-      '--ListItemButton-marginBlock': 'calc(-1 * var(--ListItem-paddingY))',
-      alignItems: 'center',
-      marginInline: 'var(--ListItem-marginInline)',
-    },
-    ownerState.nested && {
-      // add negative margin to NestedList equal to this ListItem padding
-      '--NestedList-marginRight': 'calc(-1 * var(--ListItem-paddingRight))',
-      '--NestedList-marginLeft': 'calc(-1 * var(--ListItem-paddingLeft))',
-      '--NestedListItem-paddingLeft': `calc(var(--ListItem-paddingLeft) + var(--List-nestedInsetStart))`,
-      // add negative margin to ListItem, ListItemButton to make them start from the edge.
-      '--ListItemButton-marginBlock': '0px',
-      '--ListItemButton-marginInline':
-        'calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))',
-      '--ListItem-marginInline':
-        'calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))',
-      flexDirection: 'column' as const,
-    },
+    !ownerState.nested &&
+      ({
+        // add negative margin to ListItemButton equal to this ListItem padding
+        '--ListItemButton-marginInline': `calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))`,
+        '--ListItemButton-marginBlock': 'calc(-1 * var(--ListItem-paddingY))',
+        alignItems: 'center',
+        marginInline: 'var(--ListItem-marginInline)',
+      } as const),
+    ownerState.nested &&
+      ({
+        // add negative margin to NestedList equal to this ListItem padding
+        '--NestedList-marginRight': 'calc(-1 * var(--ListItem-paddingRight))',
+        '--NestedList-marginLeft': 'calc(-1 * var(--ListItem-paddingLeft))',
+        '--NestedListItem-paddingLeft': `calc(var(--ListItem-paddingLeft) + var(--List-nestedInsetStart))`,
+        // add negative margin to ListItem, ListItemButton to make them start from the edge.
+        '--ListItemButton-marginBlock': '0px',
+        '--ListItemButton-marginInline':
+          'calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))',
+        '--ListItem-marginInline':
+          'calc(-1 * var(--ListItem-paddingLeft)) calc(-1 * var(--ListItem-paddingRight))',
+        flexDirection: 'column',
+      } as const),
     // Base styles
     {
       // Integration with control elements, eg. Checkbox, Radio.
@@ -70,7 +72,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>(
       ...(ownerState.endAction && {
         '--unstable_endActionWidth': '2.5rem', // to add sufficient padding-right on ListItemButton
       }),
-      boxSizing: 'border-box' as const,
+      boxSizing: 'border-box',
       borderRadius: 'var(--ListItem-radius)',
       display: 'flex',
       flex: 'none', // prevent children from shrinking when the List's height is limited.
@@ -101,7 +103,7 @@ export const StyledListItem = styled('li')<{ ownerState: ListItemOwnerState }>(
         zIndex: 1,
         background: `var(--ListItem-stickyBackground, ${theme.vars.palette.background.body})`,
       }),
-    },
+    } as const,
     theme.variants[ownerState.variant!]?.[ownerState.color!],
   ],
 );