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

Open ijxy opened this issue 11 months ago • 1 comments

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>?

Dec 30 '24 20:12 ijxy

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;
}

Jan 02 '25 13:01 mwskwong