16

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

4

8 回答 8

23

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

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

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

body {
    margin: 0;
}

于 2017-03-29T17:48:53.687 回答
20

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

结果 ：

在此处输入图像描述

于 2018-09-10T08:12:52.643 回答
10

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

<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;
}
于 2016-01-15T19:34:11.217 回答
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;
于 2018-06-07T17:23:49.100 回答
1

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

非常适合我

于 2016-07-03T21:46:32.943 回答
1

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

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

现在我不知道这会在多大程度上影响导航栏的行为，但它会解决这个烦人的默认功能

于 2021-06-07T23:06:43.700 回答
0

以防万一您仍然需要答案，<AppBar position="absolute"

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

于 2021-11-22T17:24:54.667 回答
-1

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

 <AppBar
          position="static"
          color="inherit"
          style={{ position: 'fixed', top: 0 , left : 0,  margin: 0}}
        >
于 2018-08-23T11:13:36.847 回答