React-Admin CSS 主题覆盖放置在 <head> 中，并被 MaterialUI 覆盖答案

【问题标题】：React-Admin CSS theme overrides are placed earlier in <head> and getting overwritten by MaterialUIReact-Admin CSS 主题覆盖放置在 <head> 中，并被 MaterialUI 覆盖
【发布时间】：2021-07-25 20:59:12
【问题描述】：

在升级到 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,400,500,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, 255, 1)',
       '&:hover': {
          backgroundColor: green[900],
          color: 'rgba(255, 255, 255, 1)',
       }
     },
     active: {
        backgroundColor: green[500],
        color: 'rgba(255, 255, 255, 1)',
     }
   }
  }
}

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

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

【问题讨论】：

标签： material-ui react-admin

【解决方案1】：

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

我以为我匹配了 @material-ui 版本，并且几乎可以肯定问题出在其他地方，经过 3 天的询问并尝试修复问题后，我随机认为升级过程中可能真的出了问题，嗯……不不要伤害我重新安装新鲜的机会。它实际上解决了我的问题。

【讨论】：