fix(react-grid-material-ui): fix styled components' styles that use t…

…heme.spacing with a negative sign (#3660)
DevExpress · Jul 27, 2023 · 6f6588a · 6f6588a
1 parent 23fc6f3
commit 6f6588a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-checkbox.jsx
@@ -13,13 +13,18 @@ const StyledCheckboxMUI = styled(CheckboxMUI)(({ theme }) => ({
     marginTop: '-1px',
     marginBottom: '-1px',
     marginRight: theme.spacing(2),
-    marginLeft: -theme.spacing(2),
+    marginLeft: `-${theme.spacing(2)}`,
     padding: theme.spacing(1),
   },
 }));
 
 export const TableTreeCheckbox = ({
-  disabled, checked, indeterminate, onChange, className, ...restProps
+  disabled,
+  checked,
+  indeterminate,
+  onChange,
+  className,
+  ...restProps
 }) => (
   <StyledCheckboxMUI
     className={classNames(classes.checkbox, className)}

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx b/packages/dx-react-grid-material-ui/src/templates/table-tree-expand-button.jsx
@@ -16,7 +16,7 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
   [`&.${classes.button}`]: {
     marginTop: '-1px',
     marginBottom: '-1px',
-    marginLeft: -theme.spacing(1),
+    marginLeft: `-${theme.spacing(1)}`,
     marginRight: theme.spacing(2),
     padding: theme.spacing(1),
   },
@@ -27,15 +27,20 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
 }));
 
 export const TableTreeExpandButton = ({
-  visible, expanded, onToggle,
+  visible,
+  expanded,
+  onToggle,
   className,
   ...restProps
 }) => (
   <StyledIconButton
-    className={classNames({
-      [classes.button]: true,
-      [classes.hidden]: !visible,
-    }, className)}
+    className={classNames(
+      {
+        [classes.button]: true,
+        [classes.hidden]: !visible,
+      },
+      className,
+    )}
     onClick={(e) => {
       if (!visible) return;
       e.stopPropagation();
@@ -44,9 +49,7 @@ export const TableTreeExpandButton = ({
     tabIndex={visible ? 0 : -1}
     {...restProps}
   >
-    {expanded
-      ? <ExpandMore />
-      : <ChevronRight />}
+    {expanded ? <ExpandMore /> : <ChevronRight />}
   </StyledIconButton>
 );