MUI provides a simple <Appbar> container that automatically adjusts its height based on the viewport dimensions:
import React from 'react';
import ReactDOM from 'react-dom';
import Appbar from 'muicss/lib/react/appbar';
class Example extends React.Component {
render() {
return <Appbar></Appbar>;
}
}
ReactDOM.render(<Example />, document.getElementById('example'));
MUI also provides several helper classes that are useful for sharing the appbar height with other elements:
.mui--appbar-height (sets height property).mui--appbar-min-height (sets min-height property).mui--appbar-line-height (sets line-height property)Height helpers are useful for centering appbar content:
import React from 'react';
import ReactDOM from 'react-dom';
import Appbar from 'muicss/lib/react/appbar';
class Example extends React.Component {
render() {
let s1 = {verticalAlign: 'middle'};
let s2 = {textAlign: 'right'};
return (
<Appbar>
<table width="100%">
<tbody>
<tr style={s1}>
<td className="mui--appbar-height">Left Side</td>
<td className="mui--appbar-height" style={s2}>Right Side</td>
</tr>
</tbody>
</table>
</Appbar>
);
}
}
ReactDOM.render(<Example />, document.getElementById('example'));