Material-UI app bar поставляется с запасом

Я использовал компонент AppBar Material-UI , и он хорошо работает, но поставляется с запасом, у любого есть обходной путь. Мне нужно избавиться от маржи.

6 4
javascript css reactjs material-ui

6 ответов:

Вы всегда можете задать пользовательские стили для компонента material-ui, передав ему свойство style следующим образом: 

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

, который переопределит стиль корневого элемента по умолчанию. Если свойство, которое вы хотите изменить, находится в дочернем компоненте, вам придется установить его с помощью CSS, если нет конкретного свойства material-ui , которое вас предоставляет.

4

Если вы используете шаблон React Web по умолчанию для создания проекта, вы можете отредактировать файл index.html в папке public, Добавить стиль ниже в тело: 

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

Или добавьте его в файл css, как показано ниже: 

body {
    margin: 0;
}
7

Трюк {{margin }} не сработал для меня , поэтому я попробовал использовать этот css http://meyerweb.com/eric/tools/css/reset/ .

Отлично работает для меня

1

Вы можете использовать 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;
1

Просто вставьте тег 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;

Результат:

Введите описание изображения здесь

0

Зафиксируйте панель приложения в левом верхнем углу следующим образом

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