我正在寻找一种在 backgroundSize 方法中动态设置 backgroundPosition 和 createMuitheme 属性的方法，基于从钩子报告的窗口尺寸，在页面容器中使用 {{ 1}} 和 ThemeProvider 被调用。我正在使用 CssBaseline，它取决于 next 10.2.0（任何解决方案都应该与任一解决方案基本兼容）。
或者，如果有人有使用 react{-dom} 17.0.2 的解决方案，我很乐意采用。
我有 styled-components ^5 在调整窗口大小时正确记录到控制台。我被绊倒的部分是，一旦我有了尺寸，我将如何将它们反馈回 window.{innerHeight,innerWidth} 对象 (?)
我是否必须在子函数中使用 createMuiTheme 更改 overrides.MuiCssBaseline.'@global'.body (?) 我想可能有不止一种方法可以解决这个问题 - 任何想法都非常感谢。
makeStyles：
globalTheme.jsimport { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'@global': {
body: {
// border: '2px solid blue',
backgroundImage: `url("/background-image.jpg")`,
backgroundAttachment: `fill`,
backgroundSize: `cover`,
backgroundPosition: `0 0`,
backgroundRepeat: `no`,
},
},
},
},
});
export default theme;
钩子：
useDimensions.jsimport { useState, useEffect } from 'react';
const useDimensions = () => {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
};
export default useDimensions;
包装器：
PageContainer.jsximport { Fragment } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from 'styles/globalTheme';
import useDimensions from 'hooks/useDimensions';
const PageContainer = ({ children }) => {
const { width, height } = useDimensions();
return (
<Fragment>
{console.log(width, height)}
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</Fragment>
);
}
export default PageContainer;
例如：
console.log(height, width)