[joy-ui] How to adjust theme spacing with HTML font-size: 10px

[veedeo]

Im trying to embed Joy-UI components into HTML page with

:root {
  font-size: 62.5%;
}

The UI looks small and unreadable. I increased default theme with bigger fontSize and lineHeight, but it fixed only part of Typogaphy, TextBoxes and buttons are still smaller then expected

const theme = extendTheme({
  fontSize: {
    xl4: "3.6rem",
    xl3: "3rem",
    xl2: "2.4rem",
    xl: "2rem",
    lg: "1.8rem",
    md: "1.6rem",
    sm: "1.4rem",
    xs: "1.2rem",
  },
  lineHeight: {
    xs: "2.133344", // largest font sizes: h1, h2
    sm: "2.285728", // normal font sizes
    md: "2.4", // normal font sizes
    lg: "2.488896", // large font sizes for components
    xl: "2.666672", // smallest font sizes
  },
});

What else do I need to extend? Is there a more generic approach to it?

Search keywords:

[danilo-leal]

Hey @veedeo, thanks for opening the issue! Could you provide a minimal reproduction? It helps us troubleshoot. This StackBlitz sandbox template may be a good starting point.

[veedeo]

Sure, here is the repro: https://stackblitz.com/edit/stackblitz-starters-wkfqf1?file=src%2Findex.tsx try commenting out lineHeight values.

basically Im looking to something similar to this https://mui.com/material-ui/customization/typography/#html-font-size but for all Joy-UI components

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI