Summary
In the React renderer, the default reset rule below is also affecting downstream custom registered components:
:where(.a2ui-surface) :where(*) {
all: revert;
}This makes it very hard to integrate an existing design system through the custom component registry, because styles from the host component library are reset together with the built-in A2UI structure.
Current behavior
We register custom React components through the registry, for example components backed by an existing design system such as:
- Select
- Tag
- Switch
- Tabs
- Table
These components render correctly in terms of structure, but their styles are reset by the global rule above, because they are mounted inside .a2ui-surface.
As a result, they fall back to plain/native-looking UI or lose visual styles entirely.
Why this is a problem
The current reset rule is broad enough to be useful for built-in A2UI components, but it also hits custom registered components, which already have their own styling system.
This creates friction for one of A2UI's main extensibility paths: mapping server-side component types to downstream/native app components.
Expected behavior
The React renderer should allow custom registered components to keep their own styles.
Possible directions:
- Scope the reset so it only applies to built-in/basic catalog components.
- Exclude custom registered component subtrees from the reset.
- Expose an option to disable or customize the default reset behavior.
- Provide an officially supported escape hatch for downstream component libraries.
Suggested improvement
A practical solution would be to avoid applying all: revert to the entire .a2ui-surface subtree, and instead restrict it to the built-in structural/content nodes that the renderer owns.
That would preserve the isolation benefits for built-in components while avoiding style breakage for custom components.
Related context
I found this existing issue, which seems related in spirit because it also points to side effects from reset-styles:
#1175
Environment
- @a2ui/react: 0.8.x
- React renderer
- Custom registered components from an external design system
Summary
In the React renderer, the default reset rule below is also affecting downstream custom registered components:
This makes it very hard to integrate an existing design system through the custom component registry, because styles from the host component library are reset together with the built-in A2UI structure.
Current behavior
We register custom React components through the registry, for example components backed by an existing design system such as:
These components render correctly in terms of structure, but their styles are reset by the global rule above, because they are mounted inside
.a2ui-surface.As a result, they fall back to plain/native-looking UI or lose visual styles entirely.
Why this is a problem
The current reset rule is broad enough to be useful for built-in A2UI components, but it also hits custom registered components, which already have their own styling system.
This creates friction for one of A2UI's main extensibility paths: mapping server-side component types to downstream/native app components.
Expected behavior
The React renderer should allow custom registered components to keep their own styles.
Possible directions:
Suggested improvement
A practical solution would be to avoid applying all: revert to the entire .a2ui-surface subtree, and instead restrict it to the built-in structural/content nodes that the renderer owns.
That would preserve the isolation benefits for built-in components while avoiding style breakage for custom components.
Related context
I found this existing issue, which seems related in spirit because it also points to side effects from reset-styles:
#1175
Environment