material ui 'new' v5.0.0jectFirst 无法设置特异性

问题描述 投票：0回答：2

MUI 

v5.0.0
今天发布了，在我的 Spike 分支中，我正在尝试更新到新版本。我正在执行 mui 文档中详细说明的步骤here。我将 
styled-components
与 
NextJS
一起使用，似乎 mui 风格是 not 首先注入。我不确定我可以采取什么不同的措施来提前实现这一目标，据我所知，我一直在正确遵循该指南中的所有内容并逐步进行更改。然而，我仍然遇到特异性错误。

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"
  },
...
javascript reactjs material-ui next.js styled-components
2个回答
9
投票

试试这个

import StyledEngineProvider from '@mui/material/StyledEngineProvider';

function App() {
  return (
    <StyledEngineProvider injectFirst>
      <OtherComponents />
    </StyledEngineProvider>
  );
}

0
投票

我认为在你的例子中它工作正常，因为注入首先完成他的工作并在你之前注入CSS。因此，所有类都具有相同的特异性（可能为 0.1.0），在这种情况下，顺序很重要。因此，当您从 MUI“首先注入”默认 CSS 时，您可以在类中使用自定义 CSS 进行覆盖。我在 Next 13 中使用 CCS 模块。这里有一些关于它的文档。 https://mui.com/material-ui/guides/interoperability/#css-modules

import { StyledEngineProvider } from "@mui/material/styles";

export default function YourComponent(){

return (
<StyledEngineProvider injectFirst>
 <OtherComponents/>
</StyledEngineProvider>
);
}

这对我有用。但是，只有当我在特定组件中像这样使用它时它才起作用。我首先尝试创建一个包装我所有应用程序的全局提供程序，但它不起作用。 我遇到的问题是我在 css 模块中编写的自定义样式被 MUI 默认值覆盖。这样做有助于更改 CSS 的顺序，并且具有相同的特异性，现在顺序是正确的。 希望这有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.