React-Admin CSS 主题覆盖放在 <head> 的前面，并被 MaterialUI 覆盖

Question

升级到 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> 两次，覆盖了属性.

Answer 1

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

我以为我匹配了 @material-ui 版本，几乎可以肯定问题出在其他地方，经过 3 天的询问并尝试使用创可贴解决问题后，我随机想到可能在升级过程中确实出了问题，嗯...不会影响我重新安装新的机会。它实际上解决了我的问题。

React-Admin CSS 主题覆盖放在 <head> 的前面，并被 MaterialUI 覆盖

React-Admin CSS theme overrides are placed earlier in <head> and getting overwritten by MaterialUI

material-ui

react-admin