use css media query over js

mui · Jul 30, 2020 · bb9c2d5 · bb9c2d5
1 parent 691b96e
commit bb9c2d5
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -9,8 +9,6 @@ import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
-import useTheme from '../styles/useTheme';
-import useMediaQuery from '../useMediaQuery';
 
 export const styles = (theme) => {
   const top1 = { top: 8 };
@@ -37,6 +35,12 @@ export const styles = (theme) => {
       right: 8,
       justifyContent: 'center',
       alignItems: 'center',
+      /* default ancohrOrigin */
+      ...bottom1,
+      [theme.breakpoints.up('sm')]: {
+        ...bottom3,
+        ...left3,
+      },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
     anchorOriginTopCenter: {
@@ -100,7 +104,7 @@ export const styles = (theme) => {
 const Snackbar = React.forwardRef(function Snackbar(props, ref) {
   const {
     action,
-    anchorOrigin: anchorOriginProp,
+    anchorOrigin: { vertical, horizontal } = { vertical: 'bottom', horizontal: 'default' },
     autoHideDuration = null,
     children,
     classes,
@@ -129,13 +133,9 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
     ...other
   } = props;
 
-  const theme = useTheme();
   const timerAutoHide = React.useRef();
   const [exited, setExited] = React.useState(true);
 
-  const desktop = useMediaQuery(theme.breakpoints.up('sm'));
-  const { vertical = 'bottom', horizontal = desktop ? 'left' : 'center' } = anchorOriginProp;
-
   const handleClose = useEventCallback((...args) => {
     if (onClose) {
       onClose(...args);
@@ -229,7 +229,10 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) {
       <div
         className={clsx(
           classes.root,
-          classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`],
+          {
+            [classes[`anchorOrigin${capitalize(vertical)}${capitalize(horizontal)}`]]:
+              horizontal !== 'default',
+          },
           className,
         )}
         onMouseEnter={handleMouseEnter}
@@ -271,7 +274,7 @@ Snackbar.propTypes = {
    * The `Snackbar` is placed by default bottom center on Mobile and bottom left on Desktop
    */
   anchorOrigin: PropTypes.shape({
-    horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+    horizontal: PropTypes.oneOf(['center', 'left', 'right', 'default']).isRequired,
     vertical: PropTypes.oneOf(['bottom', 'top']).isRequired,
   }),
   /**