Excessive inline styles
Part of Architecture & Best Practices, which counts for 15% of the overall score. When this check fires it deducts 2 points from that category, once per scan, no matter how many places it turns up.
What it detects
Heavy use of inline style objects in JSX makes styling hard to reuse and theme consistently.
Why it matters
A component with many style={{...}} objects hardcodes its look in a way nothing else can reuse, so colors and spacing drift from the rest of the app, and later theming or dark-mode work means hunting through JSX. Each inline object is also recreated on every render. This is a maintainability cost rather than a bug.
How to fix it
Move the static styles into whatever the project already uses: utility classes if Tailwind is present, CSS Modules or the existing stylesheet otherwise, keeping style={} only for genuinely dynamic values like a computed width or transform. Pull repeated values (colors, spacing) into shared tokens or variables so components stay consistent.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo