refactor: use sx rather than styled

[pionxzh]

#169 (comment)

this bad boy caused the doc bundling error in #168
Why? IDK 😢

[netlify]

✅ Deploy Preview for any-viewer ready!

Name	Link
🔨 Latest commit	93dc4c3
🔍 Latest deploy log	https://app.netlify.com/sites/any-viewer/deploys/63c6a6713da18000081d8d84
😎 Deploy Preview	https://deploy-preview-182--any-viewer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Base: 87.78% // Head: 87.51% // Decreases project coverage by -0.28% ⚠️

Coverage data is based on head (93dc4c3) compared to base (c9f9a52).
Patch coverage: 73.33% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #182      +/-   ##
==========================================
- Coverage   87.78%   87.51%   -0.28%     
==========================================
  Files          18       18              
  Lines        1941     1962      +21     
  Branches      345      345              
==========================================
+ Hits         1704     1717      +13     
- Misses        237      245       +8     

Impacted Files	Coverage Δ
src/components/DataKeyPair.tsx	69.75% <46.66%> (-1.84%)	⬇️
src/components/mui/DataBox.tsx	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.