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

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％，但它不会发生，并且证明在其顶部一个奇怪的空格，左，右角落：如何使AppBar组件填充所有div的宽度和其高度的10％？

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

我现在用的是真棒Material UI的React.js组件

来源

2016-01-11 Aleff

设置margin: 0;身体以适应上述摆脱白色空间。

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

像下面

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

没有任何更多的细节，说明你的问题，比如在父母的任何样式（#stupid-app）？

您还可以防止这个问题，通过使用reset.css或normalize.css

来源

2016-01-11 09:32:51

谢谢你的启发回答:) – Aleff

发生我通过删除DIV

div style ={{padding:'0px,0px,0px,0px'}}

它会删除APPBar的所有的额外空间的填充空间解决了这个问题。它适合我。

来源

2017-12-01 04:45:08

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

回答

相关问题