Material ui React Admin CSS主题覆盖放置在前面的<；头>；并被MaterialUI覆盖_Material Ui_React Admin

Material ui React Admin CSS主题覆盖放置在前面的<；头>；并被MaterialUI覆盖

material-ui

Material ui React Admin CSS主题覆盖放置在前面的<；头>；并被MaterialUI覆盖,material-ui,react-admin,Material Ui,React Admin,升级到React Admin 3.15（以及@material ui/core 4.11.4（以及样式））后，我们在样式方面遇到了一些问题。例如，对于我们的侧边栏元素，我们已经覆盖了全局主题中的颜色，正如推荐的那样。从技术上讲，它们是可以工作的，它们被插入到HTML头中，但被放在基本的MaterialUI样式（如.MuiButtonBase root）之前，并被覆盖这不是升级之前的问题（我们使用了react）-admin@3.10.3和@物料界面/core@4.11.1）我不确定什么代码

升级到React Admin 3.15（以及

@material ui/core 4.11.4

（以及样式））后，我们在样式方面遇到了一些问题。例如，对于我们的侧边栏

元素，我们已经覆盖了全局主题中的颜色，正如推荐的那样。从技术上讲，它们是可以工作的，它们被插入到HTML头中，但被放在基本的MaterialUI样式（如

.MuiButtonBase root

）之前，并被覆盖

这不是升级之前的问题（我们使用了

react）-admin@3.10.3

和

@物料界面/core@4.11.1

）

我不确定什么代码是相关的，我们也有点怀疑Next.js，所以这里是

pages/\u app.tsx

和

pages/\u document.tsx

（这些文件在更新期间没有更改）：

pages/\u 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 }
}

// 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的

组件中导出和导入：

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

文件夹，认为这可能是缓存问题，并在浏览器中硬重新加载，但没有效果

编辑：样式似乎更加不一致-例如，两个

具有相同的代码（在不同的页面上），但其中一个具有

.MuiIconButton root

阴影

.MuiSwitch switchBase

，有效地关闭了

transition:left…

CSS属性，而另一个工作正常。这是因为出于某种原因，

.MuiIconButton root

被插入到

中两次，覆盖了该属性。

如果您碰巧遇到了与我相同的问题-在尝试其他任何操作之前，帮你自己一个忙，如果可以的话，试着删除整个

node\u模块

并重新安装软件包

我认为我匹配了

@material ui

版本，几乎可以肯定问题出在其他地方，在询问并试图解决问题3天后，我随机认为可能在升级过程中真的出现了问题，而且。。。不会影响我重新安装fresh的机会。它实际上解决了我的问题