React中迁移sx={{}}至styles.scss后样式失效，求解决方案

错误原因分析 #

你的SCSS代码存在三个关键问题：

1. 嵌套选择器冗余：.Error-state 内部又嵌套了一层 .Error-state，但你仅给Box组件添加了一个className="Error-state"，导致样式无法匹配到目标元素。
2. CSS属性名错误：
   • Place-items 应为全小写的 place-items（CSS属性名区分大小写，标准写法为小写）
   • Min-heights 是拼写错误，正确属性名是 min-height（原SX中的minheight是MUI的驼峰写法，对应CSS的min-height）
3. 属性值不匹配：原SX中是minheight:'100vh'，SCSS中错误写成Min-heights: 100vh，不仅属性名错误，还多了后缀s。

修复后的SCSS代码 #

.Error-state {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

组件代码调整 #

确保Box组件正确绑定className，同时移除原内联sx样式避免冲突：

const ErrorState=({width})=>{
  const{t}=useTranslation();
return(
  <>
   <div data-testid="payment-cards-container-id"/>
<Box
    data-testid="errorState"
    width={width}
    className="Error-state"
 >
    <Box>
        <ErrorIcon/>
        <Typography
              variant="body-copy-medium"
              style={{marginTop:20}}
        >
          {/* 补充你的文本内容 */}
        </Typography>
        <Button
          data-testid="refreshButton"
          style={{marginTop:20,width:'fit-content'}}
          onClick={()=>window.location.reload()}
        >
          {/* 补充按钮文本 */}
        </Button>
    </Box>
    </Box>
    </>
   );
};

额外注意事项 #

• 如果页面仍无法居中，检查根元素（html/body）是否存在默认margin，可添加以下样式消除偏移：

  body {
      margin: 0;
  }
  

• 确保SCSS文件已正确导入到组件中，比如在组件顶部添加：

  import './styles.scss';
  

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