[TreeView] Fix box-sizing dependency (#10255)

mui · Sep 11, 2023 · a071e54 · a071e54
1 parent dfa06c7
commit a071e54
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx
@@ -60,6 +60,7 @@ const StyledTreeItemContent = styled(TreeItemContent, {
 })<{ ownerState: TreeItemOwnerState }>(({ theme }) => ({
   padding: '0 8px',
   width: '100%',
+  boxSizing: 'border-box', // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -116,10 +117,11 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     },
   },
   [`& .${treeItemClasses.label}`]: {
+    paddingLeft: 4,
     width: '100%',
+    boxSizing: 'border-box', // prevent width + padding to overflow
     // fixes overflow - see https://github.com/mui/material-ui/issues/27372
     minWidth: 0,
-    paddingLeft: 4,
     position: 'relative',
     ...theme.typography.body1,
   },