Question

我使用了 Material-UI 的AppBar组件并且效果很好，但是有一个保证金，任何人都有一个解决方法。我需要摆脱利润。

Answer 1

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

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

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

body {
    margin: 0;
}

Answer 2

您可以随时在 material-ui 组件上指定自定义样式，方法是将style属性传递给它：

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

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

Answer 3

您可以使用Material-ui（https://material-ui-next.com/style/css-baseline/）

中的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;

Answer 4

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

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

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 5

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

完美适合我

Answer 6

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

CannotInjectValueError: Cannot inject value into "UserRestController.userService". Please make sure you setup reflect-metadata properly and you don't use interfaces without service tokens as injection value.

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

Answer 7

我遇到了同样的问题，唯一对我有用的解决方案是：

const styles = theme => ({
  ...
  appBar: {
    width: "auto",
    marginTop: -1,
    marginLeft: -1,
    marginRight: -1,
  },
});

<AppBar
  position="sticky or static or relative"
  ...
 >
  ...

Answer 8

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

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

Material-UI应用栏带有保证金

8 个答案: