All geek questions in one place

The Material-UI app bar comes with a difference

I used the Material-UI component of the AppBar, and it works well, but with a margin, someone has a workaround. I need to get rid of the field.

+4
source share
7 answers

You can always specify custom styles in the material-ui component by passing it a property styleas follows:

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

This will override the default root element style. If the property you want to change is on the child component, you will need to set it using CSS, if there is no specific property property - ui exposes you.

+5

React Web , index.html public, :

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

css, :

body {
    margin: 0;
}
Hide result
+10

Css Baseline Material-ui (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

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

+3

{{margin}} , css http://meyerweb.com/eric/tools/css/reset/.

+1
source

I had the same problem, the only solution that worked for me was:

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

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

Fix the application bar in the upper left corner like this

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

Source: https://habr.com/ru/post/1624492/

More articles:


All Articles