Javascript 材质UI应用程序栏带有边距

我使用了的AppBar组件，它工作得很好，但是有一个边距，任何人都可以找到解决办法。我需要去掉边距。

通过将

style

属性传递给material ui组件，始终可以在该组件上指定自定义样式，如下所示：

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

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

*，*：之后，*：之前{
框大小：边框框；
字体：继承；
颜色：继承；
保证金：0；
填充：0；
边界：无；
大纲：无；
}

技巧{{margin}}对我不起作用，所以我尝试使用这个css

---

非常适合我

如果您使用默认的React Web模板创建项目，您可以编辑

public

文件夹中的

index.html

文件，在正文中添加以下样式：

...

您可以从材质ui（）使用Css基线

从“React”导入React；
从“@material ui/core/CssBaseline”导入CssBaseline；
函数MyApp（）{
返回(
{/*应用程序的其余部分*/}
);
}
导出默认MyApp；

像这样将应用程序栏固定在左上角

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

只需在要删除其默认边距的任何元素之前插入标记即可。像

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;

import React，{Component}来自'React'；
从“/Components/Main”导入Main；
从“@material ui/core/CssBaseline”导入CssBaseline；
//或
//从“@material ui/core”导入{CssBaseline}；
类应用程序扩展组件{
render（）{
返回(
//低于此值的任何元素都不会有默认边距
);
}
}
导出默认应用程序；

结果:

---

在材质ui 4.11.1中，您可以将位置参数从“静态”更改为“动态”

{/*此处代码*/}

---

现在我不知道这会对导航条的行为产生多大影响，但它会解决默认情况下的anoying功能

谢谢，是的，但我的问题是身体有余量。从正文中删除边距解决了此问题。如果其他人遇到此问题，我建议在Github上查看此问题：

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

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;

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