majiayu000 styled-jsx resolve Skill
When a parent must style nested child components without leaking global CSS, use styled-jsx/css "resolve".
Rules
- Prefer passing props/variants to the child first.
- If the child is third-party or cannot be changed, prefer :global(...) in a narrow way.
- Use resolve only when it materially improves scoping and maintainability.
Output expectations
- Show the parent code using resolve tags from styled-jsx/css.
- Clearly indicate the scope class returned by resolve and where it is applied.
- Add a brief test or story demonstrating the styling effect (as feasible).