Блог

Главная - Вопросы по программированию - Переопределения CSS-темы React-Admin размещаются ранее в и перезаписываются MaterialUI

Переопределения CSS-темы React-Admin размещаются ранее в и перезаписываются MaterialUI

#material-ui #react-admin

Вопрос:

После обновления до React-Admin 3.15 (и @material-ui/core 4.11.4 (также стили)) у нас возникли некоторые проблемы со стилями. Например, для наших <MenuItemLink /> элементов боковой панели мы переопределили цвета в глобальной теме, как рекомендовано в документах. Технически они работают, они вставляются в HTML-заголовок, но помещаются перед основными стилями MaterialUI (например .MuiButtonBase-root ), и те их перезаписывают.

Реагировать-стили администратора вставляются в середине головы

Это не было проблемой до обновления (мы использовали react-admin@3.10.3 и @material-ui/core@4.11.1 ).

Ранее стили RA вставлялись в конце головки

Я не совсем уверен, какой код имеет отношение к делу, и мы вроде как подозреваем 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,700amp;display=swap" />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto Slab:300,400,500,700amp;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)',
       'amp;: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> дважды, перезаписывая это свойство.

Ответ №1:

Если вы случайно столкнетесь с той же проблемой, что и я, — прежде чем пытаться что-то еще, сделайте себе одолжение и попробуйте удалить все node_modules и переустановить пакеты, если сможете.

Я думал, что соответствую @material-ui версиям и был почти уверен, что проблема где-то в другом месте, и после 3 дней расспросов и попыток исправить проблемы, я случайно подумал, что, возможно, что-то действительно сломалось во время обновления, и ну… не повредит моим шансам переустановить заново. И это действительно решило мою проблему.

Метки: