材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性
Posted
技术标签:
【中文标题】材料 ui \'new\' v5.0.0 injectionFirst 无法设置特异性【英文标题】：material ui 'new' v5.0.0 injectFirst fails to set specificity材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性 【发布时间】：2021-11-11 23:54:37 【问题描述】：MUI v5.0.0 今天发布了，在我的穗分支中，我正在尝试更新到新版本。我正在完成 mui-docs 中详细的here 中的步骤。我将styled-components 与NextJS 一起使用，似乎mui 样式不是 首先注入。我不确定我能做些什么来提前完成这项工作，afaik 我一直在正确地遵循该指南中的所有内容并逐步进行更改。然而，我仍然有特异性错误。
styled-component 的样式低于其他所有内容。
<StylesProvider injectFirst> 现在似乎无法正常工作
想法？
_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"
,
...
【问题讨论】：
嗨！你解决了吗？ 【参考方案1】：会有用的
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
function App()
return (
<StyledEngineProvider injectFirst>
<OtherComponents />
</StyledEngineProvider>
);
【讨论】：
我现在正在使用带有 StyledEngineProvider 组件的模块 CSS。它完美地工作 工作对我来说就像一个魅力:) 这对我来说不是一个魅力以上是关于材料 ui 'new' v5.0.0 injectionFirst 无法设置特异性的主要内容，如果未能解决你的问题，请参考以下文章
sh 在fedora（23 +）上安装node.js.（v5.0.0）