为什么我的 css 模块没有覆盖 material ui 样式？

Question

我正在使用 nextJs 和 css 模块并试图覆盖 material ui classes

 <Toolbar classes={{ root: cn(styles.root) }} />

我有 material 文档中指定的 Styles Provider 和 injectFirst 属性。

 <StylesProvider injectFirst>
    <Head />
    <HttpInterceptor />
      <CssBaseline />
      <Layout pageProps={pageProps}>
        <Component {...pageProps} />
      </Layout>
  </StylesProvider>

并且 material css 首先被注入...

但是 material 根 class 仍然覆盖我的根 class...

我在这里错过了什么？

Answer 1

想通了。我之前从 material nextjs 示例中复制了此 _document.tsx 配置。

`import Document, { Head, Html, Main, NextScript } from 'next/document'
 import React from 'react'

 import { ServerStyleSheets } from '@material-ui/core/styles'

 export default class MyDocument extends Document {
   render() {
   return (
   <Html lang="en">
    <Head />
    <body>
      <Main />
      <NextScript />
    </body>
   </Html>
   )
   }
   } 

  // `getInitialProps` belongs to `_document` (instead of `_app`),
  // it's compatible with server-side generation (SSG).
 MyDocument.getInitialProps = async ctx => {


 // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      sheets.getStyleElement(),
      ...React.Children.toArray(initialProps.styles)
    ]
  }
}

那是在我的样式表之后再次注入 material ui 代码。

并且此挂钩会在加载后删除服务器端样式。

  React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side')
if (jssStyles) {
  jssStyles.parentElement.removeChild(jssStyles)
}
}, [])

如果有人对这里发生的事情有更深入的解释，我很想听听

为什么我的 css 模块没有覆盖 material ui 样式？

Why is my css module not overriding material ui styles?

reactjs

material-ui

css-modules

next.js