Material-UI 应用栏自带边距

Question

我使用了 Material-UI 的 AppBar 组件，它运行良好，但有余量，任何人都有解决方法。我需要摆脱边距。

原文由 Rajika Imal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您始终可以通过将 style 属性传递给 material-ui 组件来指定自定义样式，如下所示：

 <AppBar style={{ margin: 0 }}/>

这将覆盖默认的根元素样式。如果您愿意更改的属性在子组件上，则必须使用 CSS 设置它，如果没有特定属性 material-ui 向您公开。

---

去除身体上的边距也可以解决您的问题

body {
  margin: 0;
}

尽管您通常应该通过集成以下 CSS 片段来使用 CSS 重置来避免出现此类错误：

 *, *:after, *:before {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

原文由 Preview 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只需在要删除其默认边距的任何元素之前插入 CssBaseline 标记。喜欢

import React, { Component } from 'react';
import Main from "./Components/Main";
import CssBaseline from '@material-ui/core/CssBaseline';
// or
// import { CssBaseline } from '@material-ui/core';

class App extends Component {
  render() {
    return (
      <div className="App">
          <CssBaseline/>
          //Any element below this will not have the default margin
          <Main/>
      </div>
    );
  }
}

export default App;

结果 ：

原文由 Yash 发布，翻译遵循 CC BY-SA 4.0 许可协议