Theme reset is not applied to `<body>` tag #661

ijxy · 2024-12-30T20:47:12Z

The styles.css file includes the below snippet, which should reset the margin on <body>:

.rt-reset:where(body, blockquote, dl, dd, figure, p) {
  margin: 0;
}

Expectation

The above snippet would apply to the <body> and set margin to 0, when the app is set up in the suggested manner:

import "@radix-ui/themes/styles.css"

import { Theme } from "@radix-ui/themes";

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

Actual outcome

The <body> has default browser margins, ie the reset is not applied.

Workaround

It seems to behave as I expect if I wrap the body with <Reset>, but this feels like a hack.

import "@radix-ui/themes/styles.css"

import { Reset, Theme } from "@radix-ui/themes";

export default function () {
  return (
    <html>
      <Reset>
        <body>
          <Theme>
            <MyApp />
          </Theme>
        </body>
      </Reset>
    </html>
  );
}

Is this the intended way to apply the CSS reset to <body>?

The text was updated successfully, but these errors were encountered:

mwskwong · 2025-01-02T13:30:17Z

Currently, <Reset> basically adds a CSS class .rt-rest to the wrapped component. The CSS reset ONLY applies if the corresponding component has this class. Therefore, technically speaking, the behavior mentioned here is by design.

However, I would much prefer the reset be done globally, e.g. instead of

.rt-reset:where(body, blockquote, dl, dd, figure, p) {
  margin: 0;
}

it would be just

body,
blockquote,
dl,
dd,
figure,
p {
  margin: 0;
}

ijxy changed the title ~~Theme reset is not applied to <body> tag using the~~ Theme reset is not applied to <body> tag Jan 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme reset is not applied to `<body>` tag #661

Theme reset is not applied to `<body>` tag #661

ijxy commented Dec 30, 2024 •

edited

Loading

mwskwong commented Jan 2, 2025 •

edited

Loading

Theme reset is not applied to <body> tag #661

Theme reset is not applied to <body> tag #661

Comments

ijxy commented Dec 30, 2024 • edited Loading

Expectation

Actual outcome

Workaround

mwskwong commented Jan 2, 2025 • edited Loading

Theme reset is not applied to `<body>` tag #661

Theme reset is not applied to `<body>` tag #661

ijxy commented Dec 30, 2024 •

edited

Loading

mwskwong commented Jan 2, 2025 •

edited

Loading