Question

我正在尝试使用素材ui创建加载状态指示符。但我希望对话框的背景颜色为none，并且还想调整高度。但是我无法通过他们提供的样式选项来做到这一点。有解决方案吗 Now it looks like this.. 代码如下所示：

<Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

Answer 1

对于最新版本（"@material-ui/core": "^1.2.3"），请按照以下步骤操作：

<Dialog
  {...otherProps}
  PaperProps={{
    style: {
      backgroundColor: 'transparent',
      boxShadow: 'none',
    },
  }}
>
  {/* ... your content ... */}
</Dialog>

记下新的PaperProps道具。它不在文档中，但是如果您查看源代码，他们会使用PaperProps作为您可以传递的道具之一-由于它不在文档中，因此可能会随着将来的版本而改变，因此小心点。

Answer 2

您可以在Dialog上设置overlayStyle prop以更改背景颜色，如下所示：

 <Dialog
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  overlayStyle={{backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
  >

Answer 3

您可以直接将<script type="text/javascript"> var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws"); stompClient = Stomp.over(socket); stompClient.debug = null; stompClient.connect({}, function(frame) { stompClient.subscribe("/user/queue", function(m, h) { response = JSON.parse(m.body); badge = Polymer.dom(document.getElementById("notificationsLabel")); badge.label = "5"; } ,{ "id" : "${currentUserId}" } ); }, function(e) { console.log("openWebSocket error", e); }); </script>  <paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>与css属性，CircularProgress和zIndex一起使用，试试这个：

opacity

它将以.5不透明度和指定的背景覆盖整个屏幕。

Answer 4

在材料v4或最新版本中。您可以使用BackdropProps，请参见online demo

Answer 5

您可以直接使用组件CircularProgress（而不是使用Dialog构建loding指标：http://www.material-ui.com/#/components/circular-progress

您可以将加载指标放在位于页面中间的div中：

JSX：

<div className="my-spinner">
    <CircularProgress size={59.5} />
</div>

CSS：

.my-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-
}

Answer 6

像这样使用bodyStyle道具：

<Dialog
  bodyStyle={{margin:0, padding:0}}
  open={true}
  style={{width: '200px', marginLeft: '40%', backgroundColor: 'transparent'}}
  title= 'Loading'
  titleStyle={{paddingTop: '0px', paddingLeft: '45px', fontSize: '15px', lineHeight: '40px'}}
>
    <RefreshIndicator
      style= {{display: 'inline-block'}}
      size={50}
      left={50}
      top={30}
      loadingColor="#FF9800"
      status="loading"    
    />
</Dialog>

如何使用透明背景颜色创建material-ui对话框并更改其高度？

6 个答案: