majiayu000 styled-jsx Global Styles Skill
Use styled-jsx global styling responsibly.
Rules
- Prefer component-scoped styles. Use global styles only when truly global.
- Prefer CSS variables for tokens (color, spacing, typography) over global tag styling.
- Avoid heavy global resets unless the project already uses them.
- If adding a one-off global selector, keep it narrow and well-commented.
Output expectations
- Create/modify:
- src/pages/_app.tsx or src/pages/_document.tsx (Next.js) OR
- a top-level Layout component OR
- the requested file
- Include a short explanation of what is global and why.
Patterns
- Global tokens:
:root { --color-bg: ...; --space-2: ...; } - Global typography:
body { font-family: ...; } - One-off escape hatch:
<style jsx global>{` .third-party-class { ... } `}</style>