tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(next): add support for custom props on the html element (#11738)

Browse Source 
This PR adds support for passing additional props to the HTML element of
Next.js `RootLayout`.

#### Context  
In our setup, we use several custom Chakra UI components. This change
enables us to add a custom font `className` to the HTML element,
following the official Chakra UI documentation:
[Using custom fonts in Chakra UI with
Next.js](https://v2.chakra-ui.com/getting-started/nextjs-app-guide#using-custom-font)

#### Example Usage  
With this update, we can now pass a `className` for custom fonts like
this:

```tsx
import { Rubik } from 'next/font/google'

const rubik = Rubik({
  subsets: ['latin'],
  variable: '--font-rubik',
})

const Layout = ({ children }: Args) => {
  return (
    <RootLayout htmlProps={{ className: rubik.variable }}>
      {children}
    </RootLayout>
  );
}
```
This commit is contained in:
Ivica Batinić
2025-03-20 21:25:33 +01:00
committed by GitHub
parent 90a08c4526
commit f9f53a65cb
1 changed files with 3 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/next/src/layouts/Root/index.tsx
View File

@@ -25,11 +25,13 @@ export const RootLayout = async ({
config: configPromise,
importMap,
serverFunction,
htmlProps = {},
}: {
readonly children: React.ReactNode
readonly config: Promise<SanitizedConfig>
readonly importMap: ImportMap
readonly serverFunction: ServerFunctionClient
readonly htmlProps?: React.HtmlHTMLAttributes<HTMLHtmlElement>
}) => {
checkDependencies()
@@ -105,6 +107,7 @@ export const RootLayout = async ({
dir={dir}
lang={languageCode}
suppressHydrationWarning={config?.admin?.suppressHydrationWarning ?? false}
{...htmlProps}
>
<head>
<style>{`@layer payload-default, payload;`}</style>