如何使AppBar组件填充所有div的宽度和10％的高度？ [英] How to make an AppBar Component fill all div's width and 10% of its height?

问题描述

  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））; 
 

尝试jsx上面的AppBar组件应该填充所有的宽度和10％的高度从其div父亲，但它不会发生，并在其顶部，左右角显示一个奇怪的空白：

我的组件的样式有什么问题？

我使用awesome Material UI 的React.js组件

解决方案

设置 margin：0; 到正文，以摆脱上面的空格。

问题是由浏览器引起的。

如下

pre> body - 用户代理样式表
display：block;
margin-top：8px;
margin-right：8px;
margin-bottom：8px;
margin-left：8px;


没有任何解释您的问题的细节，例如父项中的任何样式（＃stupid-app ）？

您也可以使用 reset.css 或 normalize.css

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"));

Trying the jsx above AppBar component should fill all width and 10% of height from its div parent but it doesn't happen and it is shown a weird blank space on its top, left and right corner:

What is wrong with my component's style?

I am using the awesome Material UI's React.js Components

解决方案

Set margin: 0; to body in order to get rid of the white space above.

This problem is caused by the browser. Every browser has its own default user agent stylesheet, you can see it in your dev-tooling.

Like below

body - User Agent Stylesheet
   display: block;
   margin-top: 8px;
   margin-right: 8px;
   margin-bottom: 8px;
   margin-left: 8px;

Without any more details that explains your problem, such as any style in parent (#stupid-app)?

You can also prevent this problem occurred by using reset.css or normalize.css

这篇关于如何使AppBar组件填充所有div的宽度和10％的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！