你如何在 React material ui 应用程序中找到应用程序栏高度？

Question

我想在第一次打开我的网站时创建一个横跨整个屏幕的图像。我正在使用反应和 material ui。目前我的 JSX 大致是这样的。我使用了默认的 material ui 主题。

<AppBar>
//code in between 
</AppBar>

<Container sx={{margin: '0px', padding: '0px'}}>
   <img src={headerPicture} style={{minHeight: '100vh', maxWidth: '100vw'}}/>
</Container>

问题是，100vh 没有考虑应用栏的高度，因此图像 + 应用栏比屏幕大。我想我必须做这样的事情：

<img src={headerPicture} style={{minHeight: '100vh - AppBarHeight', maxWidth: '100vw'}}/>

其中 AppBarWidth 等于应用栏的高度，因为它响应地变化。

你知道我将如何找出应用栏的高度吗？

Answer 1

我通过在 AppBar 上设置固定高度（可以响应）并使用常量应用它，在一个应用程序中实现了这一点。

AppBar.js（例子）

export const APP_BAR_HEIGHT = 80;
export const APP_BAR_HEIGHT_LG = 140;

const AppBar = () => {
    return (
        <div style={{ height: isLargeScreen ? APP_BAR_HEIGHT_LG : APP_BAR_HEIGHT}}>
            {/* app bar here */}
        </div>
    );
}
export default AppBar;

然后您在项目中导入并使用这些常量。

另外

写一个钩子

const useWindowHeight = () => {

    const [height, setHeight] = React.useState(window.innerHeight);
    React.useEffect(() => {
        const handleResize = () => {
            setHeight(window.innerHeight);
        }
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        }
    }, []);
    return height;
}

使用此值而不是 vh，因为 window 滚动时某些移动设备的高度会发生变化。最后，这可能看起来像这样：

import AppBar, { APP_BAR_HEIGHT, APP_BAR_HEIGHT_LG } from 'whateverpath';

// ...
const windowHeight = useWindowHeight();
return (
    <>
        <AppBar>
             //code in between 
        </AppBar>

        <Container sx={{margin: '0px', padding: '0px'}}>
            <img src={headerPicture} style={{minHeight: windowHeight - APP_BAR_HEIGHT, maxWidth: '100vw'}}/>
        </Container>
    </>
)

你如何在 React material ui 应用程序中找到应用程序栏高度？

how do you find app bar height in react material ui app?

javascript

css

reactjs

material-ui