Пользовательский интерфейс материала: стили мерцают и исчезают - PullRequest
Новая
       6

Пользовательский интерфейс материала: стили мерцают и исчезают

0 голосов
/ 10 ноября 2019

Стили появляются, возможно, на 50 мс и исчезают в приведенном ниже коде в этом приложении SSR. Мне интересно, что может быть причиной этого. 

// This component is a child of index.tsx in the /pages folder
    <Button
      color="primary"
      variant="outlined"
      size="large"
    >Test Button</Button>

После того, как стили исчезают, остается простая кнопка HTML.

Я полагаю, что Next.js вызывает это. Я проверил файл Next.js и добавил загрузчик next / babel в .babelrc. Кроме этого я только видел это другое соответствующее изменение. Это находится в /pages/_document.js:


MyDocument.getInitialProps = async ctx => {
  const sheets = new MuiServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
  };
};

Что сделано для решения проблемы

  1. Перезагрузите сервер

Без изменений в выдаче.

Принудительное обновление Chrome 78 (CTRL + F5)

Без изменений.

Теория

Я думаю, что существует сторона серверапроблема. Клиент и сервер должны быть на одной машине, localhost. Это объясняет правильный первоначальный результат (исходный пользовательский интерфейс клиента), который затем переопределяется обновлением сервера.

Обновление 1

Забыл упомянуть, что я обновил /pages/_app.jsслишком. Вот обновленная часть: 

class MyApp extends App {
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles && "parentElement" in jssStyles) {
      (jssStyles.parentElement as HTMLElement).removeChild(jssStyles);
    }
  }

1 Ответ

0 голосов
/ 10 ноября 2019

Предварительно решается путем комментирования кода для удаления сервера jssStyles

class MyApp extends App {
  // componentDidMount() {
  //   // Remove the server-side injected CSS.
  //   const jssStyles = document.querySelector('#jss-server-side');
  //   if (jssStyles && "parentElement" in jssStyles) {
  //     (jssStyles.parentElement as HTMLElement).removeChild(jssStyles);
  //   }
  // }

Если кто-нибудь знает, почему этот код включен в пример, пожалуйста, прокомментируйте. Там должна быть причина для этого. https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js

...