材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性 [英] material ui 'new' v5.0.0 injectFirst fails to set specificity
本文介绍了材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
MUI v5.0.0 今天发布了，在我的穗分支中，我正在尝试更新到新版本.我正在执行
<StylesProvider injectFirst> 现在似乎无法正常工作
想法?
_app.tsx
import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';导入 withDarkMode, { useDarkMode } from 'next-dark-mode';从 'src/theme' 导入默认主题；从'@components/_molecules/TopNavigation/TopNavigation'导入TopNavigation；从@components/_atoms/Typography/StyledTypography"导入 StyledTypography；从'react-redux'导入{提供者}；从@mui/styles"导入 { StylesProvider }；函数 MyApp({ 组件, pageProps }): JSX.Element {//?https://nextjs.org/docs/basic-features/layouts常量 getLayout = Component.getLayout ||(页面=>页面)；返回 (<StylesProvider 注入第一><ThemeProvider 主题={setTheme}><根样式><页面布局><顶部导航/><身体>{getLayout(<提供者商店={商店}><组件 {...pageProps}/></提供者>)}</正文><页脚/></页面布局></RootStyles></主题提供者></StylesProvider>);}const RootStyles = styled.div`颜色:${({主题}) =>theme.palette.font.primary};`;_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';从样式组件"导入 { ServerStyleSheet }；从@mui/styles"导入 { ServerStyleSheets }；类 MyDocument 扩展文档 {静态异步 getInitialProps(ctx) {const styledComponentsSheet = new ServerStyleSheet();const materialSheets = new ServerStyleSheets();常量 originalRenderPage = ctx.renderPage;尝试 {ctx.renderPage = () =>;原始渲染页面({增强应用程序:应用程序=>道具=>styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props}/>)),});const initialProps = 等待 Document.getInitialProps(ctx);返回 {...初始道具，款式:(<>{initialProps.styles}{materialSheets.getStyleElement()}{styledComponentsSheet.getStyleElement()}</>),};} 最后 {styledComponentsSheet.seal();}}//eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types使成为() {返回 (<Html lang=en"dir=ltr"><头><link rel="预连接";href="https://fonts.gstatic.com"/><链接rel="样式表";href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"/><链接rel="样式表";href=https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/></头><身体><主要/><下一个脚本/></身体></Html>);}}导出默认 MyDocument；package.json
<代码>...依赖":{@emotion/react":^11.4.1"，@emotion/styled":^10.0.27"，@material-ui/core":^4.12.1"，@mui/material":^5.0.0"，@mui/styled-engine":npm:@mui/styled-engine-sc@latest"，@mui/styles":^5.0.0"，下一个":10.2.3"，反应":17.0.2"，react-dom":17.0.2"，storybook-addon-styled-component-theme":^2.0.0"，样式化组件":^5.3.1"，},决议":{@mui/styled-engine":npm:@mui/styled-engine-sc@latest"},... 解决方案
它会工作
import StyledEngineProvider from '@mui/material/StyledEngineProvider';函数应用程序(){返回 (<StyledEngineProvider 注入第一><其他组件/></StyledEngineProvider>);}MUI v5.0.0 was released today and in my spike branch I am attempting to update to the new version. I'm working through the steps in the mui-docs detailed here. I am using styled-components with NextJS and it seems that the mui-styles are not injecting first. I'm not sure what I can do differently to get ahead of this, afaik I've been following everything correctly in that guide and making changes incrementally. Yet, I'm still having the specificity bug.
styled-component's style below everything else.
<StylesProvider injectFirst> doesn't seem to work correctly now
Thoughts?
_app.tsx
import styled, { createGlobalStyle, ThemeProvider } from 'styled-components';
import withDarkMode, { useDarkMode } from 'next-dark-mode';
import defaultTheme from 'src/theme';
import TopNavigation from '@components/_molecules/TopNavigation/TopNavigation';
import StyledTypography from '@components/_atoms/Typography/StyledTypography';
import { Provider } from 'react-redux';
import { StylesProvider } from '@mui/styles';
function MyApp({ Component, pageProps }): JSX.Element {
// ? https://nextjs.org/docs/basic-features/layouts
const getLayout = Component.getLayout || (page => page);
return (
<StylesProvider injectFirst>
<ThemeProvider theme={setTheme}>
<RootStyles>
<PageLayout>
<TopNavigation />
<Body>
{getLayout(
<Provider store={store}>
<Component {...pageProps} />
</Provider>
)}
</Body>
<Footer />
</PageLayout>
</RootStyles>
</ThemeProvider>
</StylesProvider>
);
}
const RootStyles = styled.div`
color: ${({ theme }) => theme.palette.font.primary};
`;
_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { ServerStyleSheets } from '@mui/styles';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const styledComponentsSheet = new ServerStyleSheet();
const materialSheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props =>
styledComponentsSheet.collectStyles(
materialSheets.collect(<App {...props} />)
),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{materialSheets.getStyleElement()}
{styledComponentsSheet.getStyleElement()}
</>
),
};
} finally {
styledComponentsSheet.seal();
}
}
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
render() {
return (
<Html lang="en" dir="ltr">
<Head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
package.json
...
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^10.0.27",
"@material-ui/core": "^4.12.1",
"@mui/material": "^5.0.0",
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
"@mui/styles": "^5.0.0",
"next": "10.2.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"storybook-addon-styled-component-theme": "^2.0.0",
"styled-components": "^5.3.1",
},
"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},
...
解决方案
It will work
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
function App() {
return (
<StyledEngineProvider injectFirst>
<OtherComponents />
</StyledEngineProvider>
);
}
这篇关于材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
