时间戳

首页 > 解决方案 > 如何样式化/减小 Material UI 警报栏的宽度？

javascript - 如何样式化/减小 Material UI 警报栏的宽度？

问题描述

目前，我没有在我的页面上使用任何其他样式或 .css 文件。警报的宽度延伸到整个页面。我正在尝试这个，但它没有任何区别：

function StatusMessage(){
    if (isRemoved){
      return (
      <Alert   style={{
        width:'50%',
      }}
      className='alerts' severity="success"> User Removed</Alert>
        )
      }
  }

标签： javascriptcssreactjstypescriptmaterial-ui

解决方案

无法重现，只是投入我的 React 项目并style={{width:'50%'}}工作。

调试思路：

  • 删除冗余className='alerts'，当您或某些库意外在此类上定义 CSS 时，也可能会搞砸。
  • 报告它所在的容器：block，flex-box其他人的行为不同，尽管我在前两个上进行了测试，并且对我来说都很好。
  • 使用浏览器调试器并报告实际应用或否决了元素的 CSS 规则，这可能会为您提供更多见解。

推荐阅读