🔥 Fix Grid responsive issue.

sha-el · Jan 28, 2021 · 162d78e · 162d78e
1 parent 7f65132
commit 162d78e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/Grid/Col.tsx b/src/components/Grid/Col.tsx
@@ -15,7 +15,7 @@ export const Col: React.FC<ColProps> = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   return (
-    <div ref={ref} className={classes(className, colStyle(props).col, 'sha-el-col')} {...rest}>
+    <div ref={ref} className={classes(className, colStyle()(props).col, 'sha-el-col')} {...rest}>
       {children}
     </div>
   );

diff --git a/src/components/Grid/style.ts b/src/components/Grid/style.ts
@@ -1,7 +1,7 @@
 import { createUseStyles } from 'react-jss';
 
-export const colStyle = createUseStyles(
-  {
+export const colStyle = () => {
+  const styles = {
     col: (props) => ({
       maxWidth: !props.flex && 100 / (24 / props.span) + '%',
       flexBasis: !props.flex && 100 / (24 / props.span) + '%',
@@ -17,7 +17,6 @@ export const colStyle = createUseStyles(
         marginLeft: props.offset && typeof props.offset === 'object' && 100 / (24 / props.offset.xs) + '%',
       }),
     },
-
     '@media (min-width: 576px)': {
       col: (props) => ({
         maxWidth: !props.flex && 100 / (24 / props.spanSm) + '%',
@@ -49,9 +48,9 @@ export const colStyle = createUseStyles(
         marginLeft: props.offset && typeof props.offset === 'object' && 100 / (24 / props.offset.xl) + '%',
       }),
     },
-  },
-  { name: 'sha-el-col' },
-);
+  };
+  return createUseStyles(styles, { name: 'sha-el-col' });
+};
 
 export const rowStyle = createUseStyles(
   {