search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
83 stars 23 forks source link

ThemeProvider: using `as='body'` inside nextjs `_document` adds duplicate attributes #944

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

Open https://stackblitz.com/edit/nextjs-ujsdru?file=pages%2F_document.js and inspect the preview to find duplicate data-iui- attributes (both on <html> and <body>).

The ones on <html> are likely added by useTheme (which should not happen because it checks for ThemeContext first). It's possible that the context is not being set when ThemeProvider is used in _document.js.

Contents of _document.js:

import { ThemeProvider } from '@itwin/itwinui-react';
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head />
      <ThemeProvider theme="dark" as="body">
        <Main />
        <NextScript />
      </ThemeProvider>
    </Html>
  );
}