Material-UI 应用栏自带边距答案

【问题标题】：Material-UI app bar comes with a marginMaterial-UI 应用栏自带边距
【发布时间】：2016-04-21 11:36:50
【问题描述】：

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

【问题讨论】：

如果其他人遇到这个问题，我建议在 Github 上查看这个问题：github.com/mui-org/material-ui/issues/7466

【解决方案1】：

如果您使用默认的 React Web 模板创建项目，您可以编辑 public 文件夹中的 index.html 文件，在正文中添加以下样式：

<body style="margin: 0">
...
</body>

或将其添加到您的 css 文件中，如下所示：

body {
    margin: 0;
}

【讨论】：

【解决方案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;

结果：

【讨论】：

【解决方案3】：

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

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

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

删除正文上的边距也可以解决您的问题

body {
  margin: 0;
}

虽然您通常应该通过集成以下 CSS sn-p 来使用 CSS 重置来避免出现此类错误：

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

【讨论】：

谢谢，是的，但我的问题是身体有边距。从正文中删除边距解决了它。

【解决方案4】：

您可以使用 Material-ui 中的 Css Baseline (https://material-ui-next.com/style/css-baseline/)

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}

export default MyApp;

【讨论】：

【解决方案5】：

技巧 {{ margin }} 对我不起作用，所以我尝试使用这个 css http://meyerweb.com/eric/tools/css/reset/。

非常适合我

【讨论】：

【解决方案6】：

在 material-ui 4.11.1 中，您可以将位置参数从 'static' 更改为 'abolute' material-ui AppBarr API

<AppBar position='absolute' color='primary'>
<Toolbar>{/*code here*/}</Toolbar>
</AppBar>

目前我不知道这会对导航栏的行为产生多大影响，但它会解决这个烦人的默认功能

【讨论】：

【解决方案7】：

以防万一您仍然需要答案，

以下是其他属性： “绝对”、“固定”、“相对”、“静态”、“粘性”

【讨论】：

【解决方案8】：

像这样修复左上角的应用栏

 <AppBar
          position="static"
          color="inherit"
          style={{ position: 'fixed', top: 0 , left : 0,  margin: 0}}
        >

【讨论】：