React-Admin CSS 主题覆盖更早地放置在 <head> 中并被 MaterialUI 覆盖

如何解决React-Admin CSS 主题覆盖更早地放置在 <head> 中并被 MaterialUI 覆盖

升级到 react-admin 3.15（以及 @material-ui/core 4.11.4（样式））后，我们遇到了一些样式问题。例如 - 对于我们的侧边栏 <MenuItemLink /> 元素，我们已经按照 docs 的建议覆盖了全局主题中的颜色。它们技术上有效，它们被插入到 HTML 头部，但被放置在之前基本 MaterialUI 样式（如 .MuiButtonBase-root）并覆盖它们。

React-Admin's styles are inserted in the middle of head

这不是升级前的问题（我们使用了 react-admin@3.10.3 和 @material-ui/core@4.11.1）。

Previously,RA styles were inserted at the end of head

我不太确定哪些代码是相关的，我们也有点怀疑 Next.js，所以这里是 pages/_app.tsx 和 pages/_document.tsx（这些文件在更新期间没有改变） :

pages/_app.tsx

const App = ({ Component,pageProps }: AppProps) => {
  // remove server-side generated CSS once it's rendered,so it doesn't collide with styles generated on the client
  useEffect(() => {
    const jssstyles = document.querySelector('#jss-server-side')
    if (jssstyles) {
      jssstyles.parentElement?.removeChild(jssstyles)
    }
  },[])

  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

App.getinitialProps = async (ctx: NextUrqlAppContext) => {
  const appProps = await NextApp.getinitialProps(ctx)
  return { ...appProps }
}

pages/_document.tsx

// is processed server-side only
export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="en">
        <Head>
          <Meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,500,700&display=swap" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

// collects server-side generated styles,and saves them to head under #jss-server-side I assume
MyDocument.getinitialProps = async (ctx) => {
  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: [
      ...React.Children.toArray(initialProps.styles),sheets.getStyleElement()
    ],}
}

我们使用的主题是在一个文件中创建的，在 react-admin 的 <Admin /> 组件中导出和导入：

const theme = {
 //...
 overrides: {
   RaMenuItemLink: {
     root: {
       color: 'rgba(255,255,1)','&:hover': {
          backgroundColor: green[900],color: 'rgba(255,}
     },active: {
        backgroundColor: green[500],}
   }
  }
}

我也尝试删除 .next 文件夹，认为可能是缓存问题，并在浏览器中硬重新加载，但无济于事。

EDIT：样式似乎更加不一致 - 例如两个 <BooleanInputs> 具有相同的代码（在不同的页面上），但其中一个 .MuiIconButton-root 掩盖了 .MuiSwitch-switchBase，有效地关闭了 transition: left... CSS 属性，而另一个工作正常。发生这种情况是因为出于某种原因，.MuiIconButton-root 被插入到 <head> 两次，覆盖了该属性。

解决方法

如果您碰巧遇到和我一样的问题 - 在尝试其他任何事情之前，帮自己一个忙，如果可以，请尝试删除整个 node_modules 并重新安装软件包。 >

我以为我匹配了 @material-ui 版本，并且几乎可以肯定问题出在其他地方，经过 3 天的询问和尝试创可贴修复问题后，我随机认为可能在升级过程中真的出了问题，好吧.. . 不会影响我重新安装新系统的机会。它实际上解决了我的问题。