a2ui-project / a2ui-project/a2ui

React renderer reset-styles should not affect custom registered components

Ouverte
#1,267 2 commentaires 1 réaction 1 personne assignée Réclamée par @ditman Voir sur GitHub
component: react renderer P2 status: needs review type: bug
Langage dominant
TypeScript
Étoiles
16.4k
Forks
1.3k
Merge moyen
2 j 13 h
PR mergées (30 j)
134

Description

## Summary

In the React renderer, the default reset rule below is also affecting downstream custom registered components:

```css
: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:

1. Scope the reset so it only applies to built-in/basic catalog components.
2. Exclude custom registered component subtrees from the reset.
3. Expose an option to disable or customize the default reset behavior.
4. 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:

* reset-styles breaks SVG rendering #1175

https://github.com/google/A2UI/issues/1175

## Environment
* @a2ui/react: 0.8.x
* React renderer
* Custom registered components from an external design system

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Look at the React renderer's reset-styles, likely in a file like `packages/react/src/renderer.ts` or a stylesheet. Find the CSS rule targeting `.a2ui-surface`. Understand how custom components are registered and rendered. The fix involves modifying the CSS selector to exclude registered component subtrees, perhaps by adding a class or data attribute. Test by registering a custom component and verifying its styles are not reset.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, react, typescript
Domaine
frontend, tooling
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Clairement spécifiée
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.