Material-UI 应用栏自带边距

Question

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

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;
}

Answer 2

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

非常适合我

Answer 3

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

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

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

body {
    margin: 0;
}

Answer 4

您可以使用来自 Material-ui (https://material-ui-next.com/style/css-baseline/)

的 Css 基线

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;

Answer 5

像这样将您的应用栏固定在左上角

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

Answer 6

只需在要删除其默认边距的任何元素前插入 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;

结果：

Answer 7

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

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

现在我不知道这会对导航栏行为产生多大影响，但它会解决这个令人讨厌的默认功能

Answer 8

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

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

Material-UI 应用栏自带边距

Material-UI app bar comes with a margin

javascript

css

reactjs

material-ui