fix(mosaic): keep the styles of the element passed to SearchTarget

Author: alexcarpenter

packages/mosaic/src/components/profile/__tests__/profile-search-target.browser.test.tsx

@@ -0,0 +1,24 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, expect, it } from 'vitest';
+
+import { SearchTarget } from '../profile-search-target';
+
+afterEach(() => cleanup());
+
+it('keeps the styles of the element passed as `render`', () => {
+  render(
+    <>
+      <style>{'@layer app { .usage-card { padding: 16px; margin: 8px; } }'}</style>
+      <SearchTarget
+        id='rate-limits'
+        render={<section className='usage-card' />}
+      >
+        Rate limits
+      </SearchTarget>
+    </>,
+  );
+
+  const target = getComputedStyle(screen.getByText('Rate limits'));
+  expect(target.padding).toBe('16px');
+  expect(target.margin).toBe('8px');
+});

packages/mosaic/src/components/profile/profile-search-target.tsx

@@ -32,7 +32,7 @@ export const SearchTarget = React.forwardRef<HTMLDivElement, SearchTargetProps>(
     defaultTagName: 'div',
     render,
     ref: [ref, target.ref],
-    props: target.props(stylex.props(reset.base, xstyle), rest),
+    props: target.props(stylex.props(xstyle), rest),
   });
 });