请求协助将Material UI的contentShift样式转换为等效SCSS

需求：将给定的Material UI主题样式转换为等效SCSS，其中up("sm")对应屏幕宽度≥600px。已创建复用的@mixin contentShiftContainer，但对过渡部分的转换存在疑问，附上原代码及尝试的SCSS代码。

原Material UI代码 #

contentShift: {
  flexGrow: 1,
  overflow: "auto",
  display: "flex",
  flexDirection: "column",
  [theme.breakpoints.up("sm")]: {
    marginLeft: theme.spacing(7),
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(["width", "margin"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
},

尝试的SCSS代码 #

@mixin contentShiftContainer{
     display: flex;
     flex-grow: 1;
     overflow: auto;
     flex-direction: column;
}

@media screen and (min-width: 600px){
   .contentShift{
        @include contentShiftContainer;
        margin-left: 7px;
        z-index: 1501;

        //transition for width and margin.
        // -webkit-transition: width 1s ease-in-out;   --> not sure.
    }

}
.contentShift{
     @include contentShiftContainer;
}

修正后的SCSS代码及说明 #

先明确几个关键对应关系：

1. Material UI的theme.spacing(7)默认是7 * 8px = 56px，不是你写的7px；
2. 过渡参数要完全匹配Material UI默认值：
   • theme.transitions.easing.sharp对应CSS缓动函数cubic-bezier(0.4, 0, 0.6, 1)；
   • theme.transitions.duration.leavingScreen对应时长195ms；
3. 过渡属性需覆盖width和margin两个维度。

修正后的代码：

@mixin contentShiftContainer{
  display: flex;
  flex-grow: 1;
  overflow: auto;
  flex-direction: column;
}

.contentShift{
  @include contentShiftContainer;
}

@media screen and (min-width: 600px){
  .contentShift{
    margin-left: 56px; // 对应theme.spacing(7)
    z-index: 1501; // 对应theme.zIndex.drawer + 1（默认drawer层级为1500）
    // 还原Material UI的过渡效果
    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1), margin 195ms cubic-bezier(0.4, 0, 0.6, 1);
    // 可选：添加webkit前缀兼容旧版浏览器
    -webkit-transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1), margin 195ms cubic-bezier(0.4, 0, 0.6, 1);
  }
}

额外说明：媒体查询内不需要重复引入contentShiftContainer，基础样式已经在.contentShift选择器中定义，只需补充断点特有的样式即可。

内容的提问来源于stack exchange，提问作者Honey Singh