Filter out buggy CSS style keys that crash the app

common/components/SettingsForm.tsx

@@ -23,7 +23,7 @@ import TextField from '@material-ui/core/TextField';
 import { Theme } from '@material-ui/core/styles';
 import { AutoPausePreference, PostMineAction } from '@project/common';
 import { AsbplayerSettings, KeyBindName, SubtitleListPreference } from '@project/common/settings';
-import { computeStyles, download } from '@project/common/util';
+import { computeStyles, download, isNumeric } from '@project/common/util';
 import { CustomStyle, validateSettings } from '@project/common/settings';
 import { useOutsideClickListener } from '@project/common/hooks';
 import TagsTextField from '@project/common/components/TagsTextField';
@@ -536,7 +536,8 @@ interface Props {
     onUnlockLocalFonts: () => void;
 }
 
-const cssStyles = Object.keys(document.body.style);
+// Filter out keys that look like '0', '1', ... as those are invalid
+const cssStyles = Object.keys(document.body.style).filter((s) => !isNumeric(s));
 
 export default function SettingsForm({
     anki,

common/util/util.ts

@@ -304,12 +304,20 @@ export function computeStyles({
             key = customStyle.key;
         }
 
-        styles[key] = customStyle.value;
+        if (!isNumeric(key)) {
+            // A bug has allowed style keys that look like '0', '1',... to make it into some users' settings
+            // Using such a style key with react crashes the app, so filter them out here
+            styles[key] = customStyle.value;
+        }
     }
 
     return styles;
 }
 
+export function isNumeric(str: string) {
+    return !isNaN(Number(str));
+}
+
 // https://stackoverflow.com/questions/63116039/camelcase-to-kebab-case
 function kebabize(str: string) {
     const kebabized = str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());