我创建了如下所示的三个文件。Paper
颜色根据 palette.type
的值变化定义于 theme.js
.
带有palette.type的页面:'dark'
带有palette.type的页面:'light'
但是,我不明白变量 theme
是如何变化的作品。我加了两个 console.log(theme)
至 index.js
.都显示 palette.type: 'light'
无论 theme.js
中的值如何.
console.log 的结果
如何通过theme
至 index.js
(不导入主题)?
组件/Layout.js - 共享组件以将相同的布局应用于所有页面
import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../utils/theme';
class Layout extends React.Component {
render() {
return(
<MuiThemeProvider theme={theme}>
{this.props.children}
</MuiThemeProvider>
)
}
}
export default Layout;
页面/index.js - 一个特定的页面
import Layout from '../components/Layout';
import { makeStyles, createStyles, useTheme, Paper } from '@material-ui/core';
const useStyles = makeStyles(theme => {
console.log('inside makeStyles');
console.log(theme);
return createStyles({
container: {
margin: '5px 5px 50px 5px'
}
})
});
export default function Index(props) {
const classes = useStyles(props);
const theme = useTheme();
console.log('inside Index')
console.log(theme);
return(
<Layout>
<h2>About</h2>
<Paper className={classes.container}>
<p>Sample test</p>
</Paper>
<Paper className={classes.container}>
<p>Sample test2</p>
</Paper>
</Layout>
)
};
utils/theme.js - 要写入的单独文件
theme
import { createMuiTheme } from '@material-ui/core/styles';
export const theme = createMuiTheme({
palette: {
type: 'dark'
}
});
最佳答案
试着搬家 <MuiThemeProvider theme={theme}>
从 Layout.js 到 _app.js。
_app.js
import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';
export default function MyApp(props) {
const { Component, pageProps } = props;
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
return (
<React.Fragment>
<Head>
<title>My page</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
);
}
MyApp.propTypes = {
Component: PropTypes.func.isRequired,
pageProps: PropTypes.object.isRequired,
};
主题应该适用于所有组件,您应该看到
dark
在 console.log()
打印。Official Material-UI + Next.js example
如 全部 页面共享相同的布局,您可以删除
Layout
组件完全。
关于reactjs - 如何使用 React + Next.js 在 Material UI 中使用 Theme?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61024356/