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

编程问答 2022-05-24

问题描述

我正在使用 nextJs 和 css 模块并试图覆盖材料 ui 类

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

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

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

首先注入材料css...

enter image description here

但是材质根类还是覆盖了我的根类...

我在这里遗漏了什么？

enter image description here

解决方法

想通了。 我之前从材料 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)
    ]
  }
}

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

enter image description here

这个钩子在加载后删除了服务器端的样式。

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

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

css-modulesmaterial-uireactjsreactjsreactjsreactjs