如何使AppBar组件填充所有div的宽度和10％的高度？-Java 学习之路

class MyStupidComponent extends React.Component {
    render() {
        return (
            <div style={{width: "100%"}}>
                <div style={{height: "10%"}}>
                    <AppBar title="MY APP" />
                </div>
            </div>
        );
    }
}

ReactDOM.render(<MyStupidComponent />, document.getElementById("stupid-app"));

尝试使用appBar组件上方的jsx应该从其div父级填充所有宽度和10％的高度，但它不会发生，并且在其顶部，左侧和右上角显示一个奇怪的空白区域：

enter image description here

我的组件风格有什么问题？

我正在使用令人敬畏的Material UI的React.js组件

2 回答

7
将 margin: 0; 设置为body以摆脱上方的空白区域 .

此问题是由浏览器引起的 . 每个浏览器都有自己的默认用户代理样式表，您可以在开发工具中看到它 .

如下
```
body - User Agent Stylesheet
   display: block;
   margin-top: 8px;
   margin-right: 8px;
   margin-bottom: 8px;
   margin-left: 8px;
```
没有任何更多细节可以解释您的问题，例如父母中的任何样式（ #stupid-app ）？

您还可以通过使用reset.css或normalize.css来防止发生此问题
回复于 2024-05-14T08:53:28+08:00
1
我通过删除div的填充空间解决了这个问题
```
div style ={{padding:'0px,0px,0px,0px'}}
```
它将删除APPBar的所有额外空间 . 这个对我有用 .
回复于 2024-05-14T08:53:28+08:00

如何使AppBar组件填充所有div的宽度和10％的高度？

2 回答

相关问题