Material-UI应用栏带有保证金
Raj*_*mal 6 javascript css reactjs material-ui
我使用了Material-UI的AppBar组件,它运行良好,但有一个余地,任何人都有一个解决方法.我需要摆脱边际.
Wil*_* Wu 13
如果使用默认的React Web模板来创建项目,则可以在index.html文件public夹中编辑文件,在正文中添加以下样式:
<body style="margin: 0">
...
</body>或者将其添加到您的css文件中,如下所示:
body {
margin: 0;
}您始终可以通过将属性传递给material-ui组件来指定自定义样式,style如下所示:
<AppBar style={{ margin: 0 }}/>
这将覆盖默认的根元素样式.如果您愿意更改的属性位于子组件上,则必须使用CSS设置它,如果没有特定的属性材料 - ui会暴露您.
- 谢谢，是的，但我的问题是身体有余量。从身体上去除边距解决了它。 (2认同)
您可以使用 Material-ui 中的 Css Baseline ( 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;
只需在要删除其默认边距的任何元素之前插入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;
结果：
| 归档时间： |
|
| 查看次数： |
12043 次 |
| 最近记录： |