[joy-ui][Checkbox] Not using the correct font in the Next.js example
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://stackblitz.com/edit/github-esh8an?file=src%2Fapp%2Fpage.tsx
Steps:
- take https://github.com/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts
- add a Checkbox
Current behavior
Checkbox has wrong font, in my case MS Shell Dig 2:
Expected behavior
It has Inter font like everything else.
Context
I copied https://github.com/mui/material-ui/tree/next/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry because https://github.com/mui/material-ui/issues/38082 is not there yet, and found this issue.
I did not test a lot of other components to see if this is checkbox-only issue, but text and buttons work.
Your environment
npx @mui/envinfo
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.15.5 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (123.0.2420.65)
Firefox: 125.0b6 (64-bit)
npmPackages:
@emotion/react: 11.11.4 => 11.11.4
@emotion/styled: 11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40 => 5.0.0-beta.40
@mui/icons-material: 5.15.14 => 5.15.14
@mui/joy: 5.0.0-beta.32 => 5.0.0-beta.32
@mui/system: ^5.15.14 => 5.15.14
@types/react: 18.2.73 => 18.2.73
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
typescript: 5.4.3 => 5.4.3
Search keywords: font next.js Inter Checkbox theme font-family
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the joy-ui-nextjs-ts example and its src/components/ThemeRegistry, then reproduce the Checkbox font issue using the linked StackBlitz example. Compare the Checkbox rendering with the working text and button styles. Done means the Checkbox uses Inter consistently with the rest of the example and the reproduction no longer shows the fallback font.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100