majiayu000 styled-jsx Dynamic Styling Skill
Implement dynamic styles without sacrificing maintainability or safety.
Prefer this order
- CSS variables set via style prop
- style={{ "--accent": color } as React.CSSProperties }
- className toggling
- data-state, data-variant
- Interpolated template literals inside only when needed
- Keep interpolations small, numeric, or enumerated
- Never interpolate untrusted strings into selectors or urls
Output expectations
- Update the component.
- Provide an explanation of why the chosen strategy is best.
- Include minimal test coverage for the dynamic behavior.
Example patterns
CSS vars:
<div style={{ "--gap": `${gap}px` } as React.CSSProperties } /> <style jsx>{`div{ gap: var(--gap, 8px); }`}</style>class toggling:
<div data-open={open ? "true" : "false"} /> <style jsx>{`div[data-open="true"]{ ... }`}</style>