web-dev-qa-db-ja.com

素材-UIアプリバーにはマージンがあります

Material-UI のAppBarコンポーネントを使用しましたが、うまく機能しますが、マージンがあり、誰でも回避策があります。マージンを取り除く必要があります。

javascriptcssreactjsmaterial-ui
8
Rajika Imal

material-uiコンポーネントに次のようにstyleプロパティを渡すことで、いつでもカスタムスタイルを指定できます。

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

これにより、デフォルトのルート要素スタイルが上書きされます。変更するプロパティが子コンポーネントにある場合、特定のプロパティがない場合はCSSを使用して設定する必要がありますmaterial-ui公開されます。

6
Balthazar

デフォルトのReact Webテンプレートを使用してプロジェクトを作成する場合は、publicフォルダー内のindex.htmlファイルを編集し、本文に以下のスタイルを追加できます。

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

または、以下のようにcssファイルに追加します。

body {
    margin: 0;
}
13
Wilson Wu

デフォルトのマージンを削除する要素の前に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;

結果：

enter image description here

5
Yash Krishan

Material-uiからCssベースラインを使用できます（ 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;
4
woss

トリック{{margin}}はうまくいかなかったので、このcssを使ってみました http://meyerweb.com/eric/tools/css/reset/ 。

私にとって完璧に動作します

1
Joxad

私は同じ問題を抱えていました、私のために働いた唯一の解決策は：

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

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