如何使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％？

回答

相關問題