diff --git a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
index 27dcbb7b3ad..5965ecaa59d 100644
Binary files a/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png and b/packages/desktop-client/e2e/rules.test.js-snapshots/Rules-creates-a-rule-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx
index 731016bfa5f..b80bd955a71 100644
--- a/packages/desktop-client/src/components/AnimatedRefresh.tsx
+++ b/packages/desktop-client/src/components/AnimatedRefresh.tsx
@@ -1,8 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 
 import { keyframes } from 'glamor';
 
 import Refresh from '../icons/v1/Refresh';
+import { type CSSProperties } from '../style';
 
 import View from './common/View';
 
@@ -22,7 +23,7 @@ export default function AnimatedRefresh({
 }: AnimatedRefreshProps) {
   return (
     <View
-      style={[{ animation: animating ? `${spin} 1s infinite linear` : null }]}
+      style={{ animation: animating ? `${spin} 1s infinite linear` : null }}
     >
       <Refresh width={14} height={14} style={iconStyle} />
     </View>
diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
index 581f06f79c5..ca90ee74a27 100644
--- a/packages/desktop-client/src/components/DevelopmentTopBar.tsx
+++ b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
@@ -6,19 +6,17 @@ import View from './common/View';
 export default function DevelopmentTopBar() {
   return (
     <View
-      style={[
-        {
-          padding: '6px 20px',
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          color: theme.warningText,
-          backgroundColor: theme.warningBackground,
-          borderBottom: `1px solid ${theme.warningAccent}`,
-          zIndex: 1,
-          flexShrink: 0,
-        },
-      ]}
+      style={{
+        padding: '6px 20px',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        color: theme.warningText,
+        backgroundColor: theme.warningBackground,
+        borderBottom: `1px solid ${theme.warningAccent}`,
+        zIndex: 1,
+        flexShrink: 0,
+      }}
     >
       <View>This is a demo build of Actual.</View>
       <View>
diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
index e92c4a53283..4f432c8077f 100644
--- a/packages/desktop-client/src/components/LoggedInUser.tsx
+++ b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, type CSSProperties } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles } from '../style';
+import { colors, styles, type CSSProperties } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -77,14 +77,12 @@ export default function LoggedInUser({
   if (loading && serverUrl) {
     return (
       <Text
-        style={[
-          {
-            color: colors.n5,
-            fontStyle: 'italic',
-          },
-          styles.delayedFadeIn,
-          style,
-        ]}
+        style={{
+          color: colors.n5,
+          fontStyle: 'italic',
+          ...styles.delayedFadeIn,
+          ...style,
+        }}
       >
         Connecting...
       </Text>
@@ -92,7 +90,7 @@ export default function LoggedInUser({
   }
 
   return (
-    <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
+    <View style={{ flexDirection: 'row', alignItems: 'center', ...style }}>
       <Button type="bare" onClick={() => setMenuOpen(true)} style={{ color }}>
         {serverMessage()}
       </Button>
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index 3b46eb879d7..90affc93468 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -1,13 +1,13 @@
 import React, { createRef, useState, useEffect } from 'react';
 
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
 
 import q from 'loot-core/src/client/query-helpers';
 import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
-import { colors } from '../style';
+import { type CSSProperties, colors } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -52,13 +52,13 @@ function NotesTooltip({
         />
       ) : (
         <Text
-          {...css({
+          style={{
             display: 'block',
             maxWidth: 225,
             padding: 8,
             whiteSpace: 'pre-wrap',
             overflowWrap: 'break-word',
-          })}
+          }}
         >
           {notes}
         </Text>
@@ -114,19 +114,19 @@ export default function NotesButton({
 
   return (
     <View
-      style={[{ flexShrink: 0 }]}
+      style={{ flexShrink: 0 }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <Button
         type="bare"
         className={!hasNotes && !tooltipOpen ? 'hover-visible' : ''}
-        style={[
-          { color: defaultColor },
-          style,
-          hasNotes && { display: 'flex !important' },
-          tooltipOpen && { color: colors.n1 },
-        ]}
+        style={{
+          color: defaultColor,
+          ...style,
+          ...(hasNotes && { display: 'flex !important' }),
+          ...(tooltipOpen && { color: colors.n1 }),
+        }}
         {...tooltip.getOpenEvents()}
       >
         <CustomNotesPaper style={{ width, height }} />
diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
index 14844e4d79f..368d095563c 100644
--- a/packages/desktop-client/src/components/Notifications.tsx
+++ b/packages/desktop-client/src/components/Notifications.tsx
@@ -6,14 +6,12 @@ import React, {
 } from 'react';
 import { useSelector } from 'react-redux';
 
-import { type CSSProperties } from 'glamor';
-
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import { useActions } from '../hooks/useActions';
 import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
-import { styles, colors } from '../style';
+import { styles, colors, type CSSProperties } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -128,7 +126,6 @@ function Notification({
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
-
           '& a': { color: 'currentColor' },
         }}
       >
@@ -222,15 +219,13 @@ export default function Notifications({ style }: { style?: CSSProperties }) {
   let notifications = useSelector(state => state.notifications.notifications);
   return (
     <View
-      style={[
-        {
-          position: 'fixed',
-          bottom: 20,
-          right: 13,
-          zIndex: 10000,
-        },
-        style,
-      ]}
+      style={{
+        position: 'fixed',
+        bottom: 20,
+        right: 13,
+        zIndex: 10000,
+        ...style,
+      }}
     >
       {notifications.map(note => (
         <Notification
diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
index 8a2068bfc9a..b6ac595eaee 100644
--- a/packages/desktop-client/src/components/Page.tsx
+++ b/packages/desktop-client/src/components/Page.tsx
@@ -1,9 +1,7 @@
 import React, { type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { colors, styles, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -20,21 +18,19 @@ function PageTitle({
   if (isNarrowWidth) {
     return (
       <View
-        style={[
-          {
-            alignItems: 'center',
-            backgroundColor: colors.b2,
-            color: 'white',
-            flexDirection: 'row',
-            flex: '1 0 auto',
-            fontSize: 18,
-            fontWeight: 500,
-            height: 50,
-            justifyContent: 'center',
-            overflowY: 'auto',
-          },
-          style,
-        ]}
+        style={{
+          alignItems: 'center',
+          backgroundColor: colors.b2,
+          color: 'white',
+          flexDirection: 'row',
+          flex: '1 0 auto',
+          fontSize: 18,
+          fontWeight: 500,
+          height: 50,
+          justifyContent: 'center',
+          overflowY: 'auto',
+          ...style,
+        }}
       >
         {name}
       </View>
@@ -43,14 +39,12 @@ function PageTitle({
 
   return (
     <Text
-      style={[
-        {
-          fontSize: 25,
-          fontWeight: 500,
-          marginBottom: 15,
-        },
-        style,
-      ]}
+      style={{
+        fontSize: 25,
+        fontWeight: 500,
+        marginBottom: 15,
+        ...style,
+      }}
     >
       {name}
     </Text>
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index afe4b8729e0..4483900ee80 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -5,7 +5,6 @@ import React, {
   useRef,
   useContext,
   type ReactNode,
-  type CSSProperties,
 } from 'react';
 import { useSelector } from 'react-redux';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
@@ -24,7 +23,7 @@ import SvgEye from '../icons/v2/Eye';
 import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
-import { colors } from '../style';
+import { colors, type CSSProperties } from '../style';
 import tokens from '../tokens';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
@@ -308,22 +307,20 @@ export default function Titlebar({ style }) {
 
   return isNarrowWidth ? null : (
     <View
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          padding: '0 15px',
-          height: 36,
-          pointerEvents: 'none',
-          '& *': {
-            pointerEvents: 'auto',
-          },
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '0 15px',
+        height: 36,
+        pointerEvents: 'none',
+        '& *': {
+          pointerEvents: 'auto',
         },
-        !Platform.isBrowser &&
+        ...(!Platform.isBrowser &&
           Platform.OS === 'mac' &&
-          floatingSidebar && { paddingLeft: 80 },
-        style,
-      ]}
+          floatingSidebar && { paddingLeft: 80 }),
+        ...style,
+      }}
     >
       {(floatingSidebar || sidebar.alwaysFloats) && (
         <Button
diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index da79a1fc5a8..8785669fcdd 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -1202,7 +1202,7 @@ class AccountInternal extends PureComponent {
             fetchAllIds={this.fetchAllIds}
             registerDispatch={dispatch => (this.dispatchSelected = dispatch)}
           >
-            <View style={[styles.page]}>
+            <View style={styles.page}>
               <AccountHeader
                 tableRef={this.table}
                 editingName={editingName}
diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
index b9376cc07e4..eb180b07adf 100644
--- a/packages/desktop-client/src/components/accounts/Header.js
+++ b/packages/desktop-client/src/components/accounts/Header.js
@@ -113,7 +113,7 @@ export function AccountHeader({
         }}
       />
 
-      <View style={[styles.pageContent, { paddingBottom: 10, flexShrink: 0 }]}>
+      <View style={{ ...styles.pageContent, paddingBottom: 10, flexShrink: 0 }}>
         <View style={{ marginTop: 2, alignItems: 'flex-start' }}>
           <View>
             {editingName ? (
diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
index 73be0521f37..3a37e01de38 100644
--- a/packages/desktop-client/src/components/accounts/MobileAccounts.js
+++ b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -28,13 +28,11 @@ function AccountHeader({ name, amount, style = {} }) {
     >
       <View style={{ flex: 1 }}>
         <Text
-          style={[
-            styles.text,
-            {
-              textTransform: 'uppercase',
-              fontSize: 13,
-            },
-          ]}
+          style={{
+            ...styles.text,
+            textTransform: 'uppercase',
+            fontSize: 13,
+          }}
           data-testid="name"
         >
           {name}
@@ -42,7 +40,7 @@ function AccountHeader({ name, amount, style = {} }) {
       </View>
       <CellValue
         binding={amount}
-        style={[styles.text, { fontSize: 13 }]}
+        style={{ ...styles.text, fontSize: 13 }}
         type="financial"
       />
     </View>
@@ -87,15 +85,13 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
             }}
           >
             <TextOneLine
-              style={[
-                styles.text,
-                {
-                  fontSize: 17,
-                  fontWeight: 600,
-                  color: updated ? theme.mobileAccountText : theme.pillText,
-                  paddingRight: 30,
-                },
-              ]}
+              style={{
+                ...styles.text,
+                fontSize: 17,
+                fontWeight: 600,
+                color: updated ? theme.mobileAccountText : theme.pillText,
+                paddingRight: 30,
+              }}
               data-testid="account-name"
             >
               {account.name}
diff --git a/packages/desktop-client/src/components/alerts.tsx b/packages/desktop-client/src/components/alerts.tsx
index 33920842767..3836c154719 100644
--- a/packages/desktop-client/src/components/alerts.tsx
+++ b/packages/desktop-client/src/components/alerts.tsx
@@ -1,10 +1,8 @@
 import React, { type ComponentType, type ReactNode } from 'react';
 
-import type { CSSProperties } from 'glamor';
-
 import ExclamationOutline from '../icons/v1/ExclamationOutline';
 import InformationOutline from '../icons/v1/InformationOutline';
-import { styles, colors } from '../style';
+import { styles, colors, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -26,21 +24,19 @@ const Alert = ({
 }: AlertProps) => {
   return (
     <View
-      style={[
-        {
-          color,
-          fontSize: 13,
-          ...styles.shadow,
-          borderRadius: 4,
-          backgroundColor,
-          padding: 10,
-          flexDirection: 'row',
-          '& a, & a:active, & a:visited': {
-            color: colors.b3,
-          },
+      style={{
+        color,
+        fontSize: 13,
+        ...styles.shadow,
+        borderRadius: 4,
+        backgroundColor,
+        padding: 10,
+        flexDirection: 'row',
+        '& a, & a:active, & a:visited': {
+          color: colors.b3,
         },
-        style,
-      ]}
+        ...style,
+      }}
     >
       <View
         style={{
@@ -69,7 +65,11 @@ export const Information = ({ style, children }: ScopedAlertProps) => {
       icon={InformationOutline}
       color={colors.n4}
       backgroundColor="transparent"
-      style={[style, { boxShadow: 'none', padding: 5 }]}
+      style={{
+        ...style,
+        boxShadow: 'none',
+        padding: 5,
+      }}
     >
       {children}
     </Alert>
diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
index 70d7f0dc885..44799d7145f 100644
--- a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
@@ -21,13 +21,11 @@ function AccountList({
   return (
     <View>
       <View
-        style={[
-          {
-            overflow: 'auto',
-            padding: '5px 0',
-          },
-          !embedded && { maxHeight: 175 },
-        ]}
+        style={{
+          overflow: 'auto',
+          padding: '5px 0',
+          ...(!embedded && { maxHeight: 175 }),
+        }}
       >
         {items.map((item, idx) => {
           const showGroup = lastItem
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index 48e1840180c..7dd2f084a76 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -11,10 +11,10 @@ import React, {
 } from 'react';
 
 import Downshift from 'downshift';
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
 
 import Remove from '../../icons/v2/Remove';
-import { theme } from '../../style';
+import { theme, type CSSProperties } from '../../style';
 import Button from '../common/Button';
 import Input from '../common/Input';
 import View from '../common/View';
@@ -154,7 +154,7 @@ type SingleAutocompleteProps = {
   renderInput?: (props: ComponentProps<typeof Input>) => ReactNode;
   renderItems?: (
     items,
-    getItemProps: (arg: { item: unknown }) => HTMLProps<HTMLDivElement>,
+    getItemProps: (arg: { item: unknown }) => ComponentProps<typeof View>,
     idx: number,
     value?: unknown,
   ) => ReactNode;
@@ -400,7 +400,7 @@ function SingleAutocomplete({
                 }
               },
               onBlur: e => {
-                // @ts-expect-error Should this be e.nativeEvent
+                // Should this be e.nativeEvent
                 e.preventDownshiftDefault = true;
                 inputProps.onBlur?.(e);
 
@@ -604,23 +604,21 @@ function MultiAutocomplete({
       tooltipProps={{
         forceLayout: lastSelectedItems.current !== selectedItems,
       }}
-      renderInput={props => (
+      renderInput={inputProps => (
         <View
-          style={[
-            {
-              display: 'flex',
-              flexWrap: 'wrap',
-              flexDirection: 'row',
-              alignItems: 'center',
-              backgroundColor: theme.tableBackground,
-              borderRadius: 4,
-              border: '1px solid ' + theme.formInputBorder,
-            },
-            focused && {
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: theme.tableBackground,
+            borderRadius: 4,
+            border: '1px solid ' + theme.formInputBorder,
+            ...(focused && {
               border: '1px solid ' + theme.formInputBorderSelected,
               boxShadow: '0 1px 1px ' + theme.formInputShadowSelected,
-            },
-          ]}
+            }),
+          }}
         >
           {selectedItems.map((item, idx) => {
             item = findItem(strict, suggestions, item);
@@ -635,25 +633,23 @@ function MultiAutocomplete({
             );
           })}
           <Input
-            {...props}
-            onKeyDown={e => onKeyDown(e, props.onKeyDown)}
+            {...inputProps}
+            onKeyDown={e => onKeyDown(e, inputProps.onKeyDown)}
             onFocus={e => {
               setFocused(true);
-              props.onFocus(e);
+              inputProps.onFocus(e);
             }}
             onBlur={e => {
               setFocused(false);
-              props.onBlur(e);
+              inputProps.onBlur(e);
+            }}
+            style={{
+              flex: 1,
+              minWidth: 30,
+              border: 0,
+              ':focus': { border: 0, boxShadow: 'none' },
+              ...inputProps.style,
             }}
-            style={[
-              {
-                flex: 1,
-                minWidth: 30,
-                border: 0,
-                ':focus': { border: 0, boxShadow: 'none' },
-              },
-              props.style,
-            ]}
           />
         </View>
       )}
@@ -674,10 +670,10 @@ export function AutocompleteFooter({
   return (
     show && (
       <View
-        style={[
-          { flexShrink: 0 },
-          embedded ? { paddingTop: 5 } : { padding: 5 },
-        ]}
+        style={{
+          flexShrink: 0,
+          ...(embedded ? { paddingTop: 5 } : { padding: 5 }),
+        }}
         onMouseDown={e => e.preventDefault()}
       >
         {children}
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index def84522c49..99041a45872 100644
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -48,13 +48,11 @@ function CategoryList({
   return (
     <View>
       <View
-        style={[
-          {
-            overflow: 'auto',
-            padding: '5px 0',
-          },
-          !embedded && { maxHeight: 175 },
-        ]}
+        style={{
+          overflow: 'auto',
+          padding: '5px 0',
+          ...(!embedded && { maxHeight: 175 }),
+        }}
       >
         {items.map((item, idx) => {
           if (item.id === 'split') {
diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
index a56a1656a2b..16f5aa67ab7 100644
--- a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -74,10 +74,11 @@ function PayeeList({
   return (
     <View>
       <View
-        style={[
-          { overflow: 'auto', padding: '5px 0' },
-          !embedded && { maxHeight: 175 },
-        ]}
+        style={{
+          overflow: 'auto',
+          padding: '5px 0',
+          ...(!embedded && { maxHeight: 175 }),
+        }}
       >
         {createNew && (
           <View
diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
index 5c9abd1ff51..2e43be2914a 100644
--- a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
+++ b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
@@ -11,10 +11,11 @@ function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
   return (
     <View>
       <View
-        style={[
-          { overflow: 'auto', padding: '5px 0' },
-          !embedded && { maxHeight: 175 },
-        ]}
+        style={{
+          overflow: 'auto',
+          padding: '5px 0',
+          ...(!embedded && { maxHeight: 175 }),
+        }}
       >
         {items.map((item, idx) => {
           return [
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index 1fda3f1cd65..93d1df5312e 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -26,13 +26,13 @@ export default function BalanceWithCarryover({
         binding={balance}
         type="financial"
         getStyle={makeAmountStyle}
-        style={[
-          { textAlign: 'right' },
-          !disabled && {
+        style={{
+          textAlign: 'right',
+          ...(!disabled && {
             cursor: 'pointer',
             ':hover': { textDecoration: 'underline' },
-          },
-        ]}
+          }),
+        }}
       />
       {carryoverValue === true && (
         <View
diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.js b/packages/desktop-client/src/components/budget/BudgetSummaries.js
index 8242d3210e3..9d512ec0648 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.js
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.js
@@ -82,10 +82,11 @@ export default function BudgetSummaries({ SummaryComponent }) {
           return (
             <View
               key={month}
-              style={[
-                { flex: `0 0 ${monthWidth}px` },
-                { paddingLeft: 4, paddingRight: 4 },
-              ]}
+              style={{
+                flex: `0 0 ${monthWidth}px`,
+                paddingLeft: 4,
+                paddingRight: 4,
+              }}
             >
               <SummaryComponent month={month} />
             </View>
diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index f1641a97020..165bb752dc9 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -51,13 +51,11 @@ function ToBudget({ toBudget, onClick }) {
         style={{ color: colors.n1, flexShrink: 0 }}
       />
       <Text
-        style={[
-          styles.smallText,
-          {
-            fontWeight: '500',
-            color: amount < 0 ? colors.r4 : colors.n1,
-          },
-        ]}
+        style={{
+          ...styles.smallText,
+          fontWeight: '500',
+          color: amount < 0 ? colors.r4 : colors.n1,
+        }}
       >
         {format(amount, 'financial')}
       </Text>
@@ -84,13 +82,11 @@ function Saved({ projected }) {
       )}
 
       <Text
-        style={[
-          styles.smallText,
-          {
-            fontWeight: '500',
-            color: projected ? colors.y3 : isNegative ? colors.r4 : colors.n1,
-          },
-        ]}
+        style={{
+          ...styles.smallText,
+          fontWeight: '500',
+          color: projected ? colors.y3 : isNegative ? colors.r4 : colors.n1,
+        }}
       >
         {format(saved, 'financial')}
       </Text>
@@ -127,7 +123,7 @@ const BudgetCell = memo(function BudgetCell(props) {
           }),
         }}
         focused={editing}
-        textStyle={[styles.smallText, textStyle]}
+        textStyle={{ ...styles.smallText, ...textStyle }}
         onChange={() => {}} // temporarily disabled for read-only view
         onBlur={value => {
           onBudgetAction(month, 'budget-amount', {
@@ -144,7 +140,7 @@ const BudgetCell = memo(function BudgetCell(props) {
           ...(editing && { display: 'none' }),
         }}
       >
-        <Text style={[styles.smallText, textStyle]} data-testid={name}>
+        <Text style={{ ...styles.smallText, ...textStyle }} data-testid={name}>
           {format(sheetValue || 0, 'financial')}
         </Text>
       </View>
@@ -280,14 +276,12 @@ class BudgetCategory extends PureComponent {
     let content = !category.hidden && (
       <ListItem
         // ref={el => (this.container = el)}
-        style={[
-          {
-            backgroundColor: editing ? colors.p11 : 'transparent',
-            borderBottomWidth: 0,
-            borderTopWidth: index > 0 ? 1 : 0,
-          },
-          style,
-        ]}
+        style={{
+          backgroundColor: editing ? colors.p11 : 'transparent',
+          borderBottomWidth: 0,
+          borderTopWidth: index > 0 ? 1 : 0,
+          ...style,
+        }}
         data-testid="row"
       >
         <View style={{ flex: 1 }}>
@@ -314,7 +308,7 @@ class BudgetCategory extends PureComponent {
             binding={budgeted}
             editing={editing}
             style={{ width: 90 }}
-            textStyle={[styles.smallText, { textAlign: 'right' }]}
+            textStyle={{ ...styles.smallText, textAlign: 'right' }}
             categoryId={category.id}
             month={month}
             onBudgetAction={onBudgetAction}
@@ -322,7 +316,11 @@ class BudgetCategory extends PureComponent {
           <CellValue
             name="balance"
             binding={balance}
-            style={[styles.smallText, { width: 90, textAlign: 'right' }]}
+            style={{
+              ...styles.smallText,
+              width: 90,
+              textAlign: 'right',
+            }}
             getStyle={value => value < 0 && { color: colors.r4 }}
             type="financial"
           />
@@ -398,7 +396,7 @@ class TotalsRow extends PureComponent {
       >
         <View style={{ flex: 1 }}>
           <Text
-            style={[styles.smallText, { fontWeight: '500' }]}
+            style={{ ...styles.smallText, fontWeight: '500' }}
             data-testid="name"
           >
             {group.name}
@@ -420,18 +418,22 @@ class TotalsRow extends PureComponent {
         >
           <CellValue
             binding={rolloverBudget.groupBudgeted(group.id)}
-            style={[
-              styles.smallText,
-              { width: 90, fontWeight: '500', textAlign: 'right' },
-            ]}
+            style={{
+              ...styles.smallText,
+              width: 90,
+              fontWeight: '500',
+              textAlign: 'right',
+            }}
             type="financial"
           />
           <CellValue
             binding={rolloverBudget.groupBalance(group.id)}
-            style={[
-              styles.smallText,
-              { width: 90, fontWeight: '500', textAlign: 'right' },
-            ]}
+            style={{
+              ...styles.smallText,
+              width: 90,
+              fontWeight: '500',
+              textAlign: 'right',
+            }}
             type="financial"
           />
         </View>
@@ -490,39 +492,42 @@ class IncomeCategory extends PureComponent {
       this.props;
     return (
       <ListItem
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: 10,
-            backgroundColor: 'transparent',
-          },
-          style,
-        ]}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: 10,
+          backgroundColor: 'transparent',
+          ...style,
+        }}
       >
         <View style={{ flex: 1 }}>
-          <Text style={[styles.smallText, nameTextStyle]} data-testid="name">
+          <Text
+            style={{ ...styles.smallText, ...nameTextStyle }}
+            data-testid="name"
+          >
             {name}
           </Text>
         </View>
         {budget && (
           <CellValue
             binding={budget}
-            style={[
-              styles.smallText,
-              { width: 90, textAlign: 'right' },
-              amountTextStyle,
-            ]}
+            style={{
+              ...styles.smallText,
+              width: 90,
+              textAlign: 'right',
+              ...amountTextStyle,
+            }}
             type="financial"
           />
         )}
         <CellValue
           binding={balance}
-          style={[
-            styles.smallText,
-            { width: 90, textAlign: 'right' },
-            amountTextStyle,
-          ]}
+          style={{
+            ...styles.smallText,
+            width: 90,
+            textAlign: 'right',
+            ...amountTextStyle,
+          }}
           type="financial"
         />
       </ListItem>
@@ -834,10 +839,12 @@ export function BudgetTable(props) {
             <CellValue
               binding={reportBudget.totalBudgetedExpense}
               type="financial"
-              style={[
-                styles.smallText,
-                { color: colors.n1, textAlign: 'right', fontWeight: '500' },
-              ]}
+              style={{
+                ...styles.smallText,
+                color: colors.n1,
+                textAlign: 'right',
+                fontWeight: '500',
+              }}
               formatter={value => {
                 return format(-parseFloat(value || '0'), 'financial');
               }}
@@ -853,10 +860,12 @@ export function BudgetTable(props) {
             <CellValue
               binding={rolloverBudget.totalBalance}
               type="financial"
-              style={[
-                styles.smallText,
-                { color: colors.n1, textAlign: 'right', fontWeight: '500' },
-              ]}
+              style={{
+                ...styles.smallText,
+                color: colors.n1,
+                textAlign: 'right',
+                fontWeight: '500',
+              }}
             />
           </View>
         </View>
@@ -969,29 +978,25 @@ function BudgetHeader({
           // hitSlop={{ top: 5, bottom: 5, left: 0, right: 30 }}
 
           onClick={prevEnabled && onPrevMonth}
-          style={[
-            buttonStyle,
-            {
-              left: 0,
-              opacity: prevEnabled ? 1 : 0.6,
-              padding: '5px 30px 5px 0',
-            },
-          ]}
+          style={{
+            ...buttonStyle,
+            left: 0,
+            opacity: prevEnabled ? 1 : 0.6,
+            padding: '5px 30px 5px 0',
+          }}
         >
           <ArrowThinLeft style={{ color: colors.n11 }} width="15" height="15" />
         </Button>
       )}
       <Text
-        style={[
-          styles.mediumText,
-          {
-            marginTop: 12,
-            marginBottom: 12,
-            color: colors.n11,
-            textAlign: 'center',
-            // zIndex: -1
-          },
-        ]}
+        style={{
+          ...styles.mediumText,
+          marginTop: 12,
+          marginBottom: 12,
+          color: colors.n11,
+          textAlign: 'center',
+          // zIndex: -1
+        }}
       >
         {/* eslint-disable-next-line rulesdir/typography */}
         {monthUtils.format(currentMonth, "MMMM ''yy")}
@@ -1000,10 +1005,13 @@ function BudgetHeader({
         <Button
           type="bare"
           onClick={onDone}
-          style={[
-            buttonStyle,
-            { position: 'absolute', top: 0, bottom: 0, right: 0 },
-          ]}
+          style={{
+            ...buttonStyle,
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+          }}
           textStyle={{
             color: colors.n11,
             fontSize: 15,
@@ -1018,7 +1026,7 @@ function BudgetHeader({
             type="bare"
             onClick={nextEnabled && onNextMonth}
             // hitSlop={{ top: 5, bottom: 5, left: 30, right: 5 }}
-            style={[buttonStyle, { opacity: nextEnabled ? 1 : 0.6 }]}
+            style={{ ...buttonStyle, opacity: nextEnabled ? 1 : 0.6 }}
           >
             <ArrowThinRight
               style={{ color: colors.n11 }}
diff --git a/packages/desktop-client/src/components/budget/MobileTable.tsx b/packages/desktop-client/src/components/budget/MobileTable.tsx
index 1bde735167a..0915f01a9f3 100644
--- a/packages/desktop-client/src/components/budget/MobileTable.tsx
+++ b/packages/desktop-client/src/components/budget/MobileTable.tsx
@@ -1,10 +1,6 @@
-import React, {
-  type ComponentProps,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
-import { colors } from '../../style';
+import { type CSSProperties, colors } from '../../style';
 import View from '../common/View';
 
 export const ROW_HEIGHT = 50;
@@ -17,19 +13,17 @@ type ListItemProps = ComponentProps<typeof View> & {
 export const ListItem = ({ children, style, ...props }: ListItemProps) => {
   return (
     <View
-      style={[
-        {
-          height: ROW_HEIGHT,
-          borderBottomWidth: 1,
-          borderColor: colors.border,
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingLeft: 10,
-          paddingRight: 10,
-          zIndex: 1,
-        },
-        style,
-      ]}
+      style={{
+        height: ROW_HEIGHT,
+        borderBottomWidth: 1,
+        borderColor: colors.border,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 10,
+        paddingRight: 10,
+        zIndex: 1,
+        ...style,
+      }}
       {...props}
     >
       {children}
diff --git a/packages/desktop-client/src/components/budget/MonthPicker.js b/packages/desktop-client/src/components/budget/MonthPicker.js
index c9520fadbb7..390f8e77bcf 100644
--- a/packages/desktop-client/src/components/budget/MonthPicker.js
+++ b/packages/desktop-client/src/components/budget/MonthPicker.js
@@ -51,14 +51,12 @@ export const MonthPicker = ({
 
   return (
     <View
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        },
-        style,
-      ]}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        ...style,
+      }}
     >
       <View
         innerRef={containerRef}
@@ -94,49 +92,47 @@ export const MonthPicker = ({
           return (
             <View
               key={month}
-              style={[
-                {
-                  padding: '3px 3px',
-                  width: size === 'big' ? '35px' : '20px',
-                  textAlign: 'center',
-                  userSelect: 'none',
-                  cursor: 'default',
-                  borderRadius: 2,
-                  border: 'none',
-                },
-                !isMonthBudgeted && {
+              style={{
+                padding: '3px 3px',
+                width: size === 'big' ? '35px' : '20px',
+                textAlign: 'center',
+                userSelect: 'none',
+                cursor: 'default',
+                borderRadius: 2,
+                border: 'none',
+                ...(!isMonthBudgeted && {
                   textDecoration: 'line-through',
                   color: colors.n7,
-                },
-                styles.smallText,
-                selected && {
+                }),
+                ...styles.smallText,
+                ...(selected && {
                   backgroundColor: colors.p6,
                   color: 'white',
-                },
-                (hovered || selected) && {
+                }),
+                ...((hovered || selected) && {
                   borderRadius: 0,
                   cursor: 'pointer',
-                },
-                hovered &&
+                }),
+                ...(hovered &&
                   !selected && {
                     backgroundColor: 'rgba(100, 100, 100, .15)',
-                  },
-                hovered &&
+                  }),
+                ...(hovered &&
                   selected && {
                     backgroundColor: colors.p7,
-                  },
-                (idx === firstSelectedIndex ||
+                  }),
+                ...((idx === firstSelectedIndex ||
                   (idx === hoverId && !selected)) && {
                   borderTopLeftRadius: 2,
                   borderBottomLeftRadius: 2,
-                },
-                (idx === lastSelectedIndex ||
+                }),
+                ...((idx === lastSelectedIndex ||
                   (idx === lastHoverId && !selected)) && {
                   borderTopRightRadius: 2,
                   borderBottomRightRadius: 2,
-                },
-                current && { fontWeight: 'bold' },
-              ]}
+                }),
+                ...(current && { fontWeight: 'bold' }),
+              }}
               onClick={() => onSelect(month)}
               onMouseEnter={() => setHoverId(idx)}
               onMouseLeave={() => setHoverId(null)}
@@ -144,16 +140,14 @@ export const MonthPicker = ({
               {size === 'small' ? monthName[0] : monthName}
               {showYearHeader && (
                 <View
-                  style={[
-                    {
-                      position: 'absolute',
-                      top: -14,
-                      left: 0,
-                      fontSize: 10,
-                      fontWeight: 'bold',
-                      color: isMonthBudgeted ? '#272630' : colors.n7,
-                    },
-                  ]}
+                  style={{
+                    position: 'absolute',
+                    top: -14,
+                    left: 0,
+                    fontSize: 10,
+                    fontWeight: 'bold',
+                    color: isMonthBudgeted ? '#272630' : colors.n7,
+                  }}
                 >
                   {year}
                 </View>
diff --git a/packages/desktop-client/src/components/budget/index.js b/packages/desktop-client/src/components/budget/index.js
index cbaa70ed428..59b9aac759f 100644
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@@ -510,10 +510,12 @@ export default function BudgetWrapper(props) {
   // appear. We might not need it anymore?
   return (
     <View
-      style={[
-        styles.page,
-        { paddingLeft: 8, paddingRight: 8, overflow: 'hidden' },
-      ]}
+      style={{
+        ...styles.page,
+        paddingLeft: 8,
+        paddingRight: 8,
+        overflow: 'hidden',
+      }}
     >
       <Budget
         startMonth={startMonth}
diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index ff8be607a21..afd41d15ab6 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -208,17 +208,17 @@ export class BudgetTable extends Component {
     return (
       <View
         data-testid="budget-table"
-        style={[
-          { flex: 1 },
-          styles.lightScrollbar && {
+        style={{
+          flex: 1,
+          ...(styles.lightScrollbar && {
             '& ::-webkit-scrollbar': {
               backgroundColor: 'transparent',
             },
             '& ::-webkit-scrollbar-thumb:vertical': {
               backgroundColor: 'white',
             },
-          },
-        ]}
+          }),
+        }}
       >
         <View
           style={{
@@ -404,27 +404,25 @@ function SidebarCategory({
   return (
     <View
       innerRef={innerRef}
-      style={[
-        {
-          width: 200,
-          '& button': { display: 'none' },
-        },
-        !dragging &&
+      style={{
+        width: 200,
+        '& button': { display: 'none' },
+        ...(!dragging &&
           !dragPreview && {
             '&:hover button': { display: 'flex', color: colors.n1 },
-          },
-        dragging && { color: colors.n8 },
+          }),
+        ...(dragging && { color: colors.n8 }),
 
         // The zIndex here forces the the view on top of a row below
         // it that may be "collapsed" and show a border on top
-        dragPreview && {
+        ...(dragPreview && {
           backgroundColor: 'white',
           zIndex: 10000,
           borderRadius: 6,
           overflow: 'hidden',
-        },
-        style,
-      ]}
+        }),
+        ...style,
+      }}
       onKeyDown={e => {
         if (e.key === 'Enter') {
           onEditName(null);
@@ -451,7 +449,7 @@ function SidebarCategory({
           }
         }}
         onBlur={() => onEditName(null)}
-        style={[{ paddingLeft: 13 }, isLast && { borderBottomWidth: 0 }]}
+        style={{ paddingLeft: 13, ...(isLast && { borderBottomWidth: 0 }) }}
         inputProps={{
           placeholder: temporary ? 'New Category Name' : '',
         }}
@@ -570,21 +568,19 @@ function SidebarGroup({
   return (
     <View
       innerRef={innerRef}
-      style={[
-        style,
-        {
-          width: 200,
-          backgroundColor: colors.n11,
-          '& button': { display: 'none' },
-          '&:hover button': { display: 'flex', color: colors.n1 },
-        },
-        dragPreview && {
+      style={{
+        ...style,
+        width: 200,
+        backgroundColor: colors.n11,
+        '& button': { display: 'none' },
+        '&:hover button': { display: 'flex', color: colors.n1 },
+        ...(dragPreview && {
           paddingLeft: 10,
           zIndex: 10000,
           borderRadius: 6,
           overflow: 'hidden',
-        },
-      ]}
+        }),
+      }}
       onKeyDown={e => {
         if (e.key === 'Enter') {
           onEdit(null);
@@ -631,11 +627,11 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
         value={monthUtils.sheetForMonth(month, type)}
       >
         <View
-          style={[
-            { flex: 1 },
-            { borderLeft: '1px solid ' + colors.border },
-            style,
-          ]}
+          style={{
+            flex: 1,
+            borderLeft: '1px solid ' + colors.border,
+            ...style,
+          }}
         >
           <Component monthIndex={index} editing={editing} {...args} />
         </View>
@@ -882,12 +878,10 @@ function ExpenseCategory({
       <DropHighlight pos={dropPos} offset={{ top: 1 }} />
 
       <View
-        style={[
-          {
-            flex: 1,
-            flexDirection: 'row',
-          },
-        ]}
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+        }}
       >
         <SidebarCategory
           innerRef={dragRef}
diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
index 3181b010110..de2da31c16c 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -6,7 +6,7 @@ import React, {
   type SVGProps,
 } from 'react';
 
-import { css, type CSSProperties } from 'glamor';
+import { css } from 'glamor';
 
 import { reportBudget } from 'loot-core/src/client/queries';
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -15,7 +15,7 @@ import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import DotsHorizontalTriple from '../../../icons/v1/DotsHorizontalTriple';
 import ArrowButtonDown1 from '../../../icons/v2/ArrowButtonDown1';
 import ArrowButtonUp1 from '../../../icons/v2/ArrowButtonUp1';
-import { colors, styles } from '../../../style';
+import { colors, type CSSProperties, styles } from '../../../style';
 import AlignedText from '../../common/AlignedText';
 import Button from '../../common/Button';
 import HoverTarget from '../../common/HoverTarget';
@@ -156,15 +156,13 @@ function BudgetTotal({
 }: BudgetTotalProps) {
   return (
     <View
-      style={[
-        {
-          lineHeight: 1.5,
-          flexDirection: 'row',
-          alignItems: 'center',
-          fontSize: 14,
-        },
-        style,
-      ]}
+      style={{
+        lineHeight: 1.5,
+        flexDirection: 'row',
+        alignItems: 'center',
+        fontSize: 14,
+        ...style,
+      }}
     >
       <ProgressComponent current={current} target={target} />
 
@@ -231,7 +229,7 @@ function Saved({ projected, style }: SavedProps) {
   let isNegative = saved < 0;
 
   return (
-    <View style={[{ alignItems: 'center', fontSize: 14 }, style]}>
+    <View style={{ alignItems: 'center', fontSize: 14, ...style }}>
       {projected ? (
         <Text style={{ color: colors.n4 }}>Projected Savings:</Text>
       ) : (
@@ -253,7 +251,10 @@ function Saved({ projected, style }: SavedProps) {
                   left="Projected Savings:"
                   right={
                     <Text
-                      style={[makeAmountFullStyle(budgetedSaved), styles.tnum]}
+                      style={{
+                        ...makeAmountFullStyle(budgetedSaved),
+                        ...styles.tnum,
+                      }}
                     >
                       {format(budgetedSaved, 'financial-with-sign')}
                     </Text>
@@ -262,7 +263,9 @@ function Saved({ projected, style }: SavedProps) {
                 <AlignedText
                   left="Difference:"
                   right={
-                    <Text style={[makeAmountFullStyle(diff), styles.tnum]}>
+                    <Text
+                      style={{ ...makeAmountFullStyle(diff), ...styles.tnum }}
+                    >
                       {format(diff, 'financial-with-sign')}
                     </Text>
                   }
@@ -338,10 +341,10 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
     >
       <NamespaceContext.Provider value={monthUtils.sheetForMonth(month)}>
         <View
-          style={[
-            { padding: '0 13px' },
-            collapsed ? { margin: '10px 0' } : { marginTop: 16 },
-          ]}
+          style={{
+            padding: '0 13px',
+            ...(collapsed ? { margin: '10px 0' } : { marginTop: 16 }),
+          }}
         >
           <View
             style={{
diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
index 39e3161a8d9..a4b1de57d66 100644
--- a/packages/desktop-client/src/components/budget/report/components.tsx
+++ b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors } from '../../../style';
+import { styles, colors, type CSSProperties } from '../../../style';
 import Button from '../../common/Button';
 import Menu from '../../common/Menu';
 import Text from '../../common/Text';
@@ -22,7 +22,11 @@ import { makeAmountGrey } from '../util';
 
 export { BudgetSummary } from './BudgetSummary';
 
-let headerLabelStyle = { flex: 1, padding: '0 5px', textAlign: 'right' };
+let headerLabelStyle: CSSProperties = {
+  flex: 1,
+  padding: '0 5px',
+  textAlign: 'right',
+};
 
 export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   const format = useFormat();
@@ -98,7 +102,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
         name="budgeted"
         width="flex"
         textAlign="right"
-        style={[{ fontWeight: 600 }, styles.tnum]}
+        style={{ fontWeight: 600, ...styles.tnum }}
         valueProps={{
           binding: reportBudget.groupBudgeted(id),
           type: 'financial',
@@ -108,7 +112,7 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
         name="spent"
         width="flex"
         textAlign="right"
-        style={[{ fontWeight: 600 }, styles.tnum]}
+        style={{ fontWeight: 600, ...styles.tnum }}
         valueProps={{
           binding: reportBudget.groupSumAmount(id),
           type: 'financial',
@@ -119,10 +123,11 @@ export const GroupMonth = memo(function GroupMonth({ group }: GroupMonthProps) {
           name="balance"
           width="flex"
           textAlign="right"
-          style={[
-            { fontWeight: 600, paddingRight: MONTH_RIGHT_PADDING },
-            styles.tnum,
-          ]}
+          style={{
+            fontWeight: 600,
+            paddingRight: MONTH_RIGHT_PADDING,
+            ...styles.tnum,
+          }}
           valueProps={{
             binding: reportBudget.groupBalance(id),
             type: 'financial',
@@ -296,22 +301,18 @@ export const CategoryMonth = memo(function CategoryMonth({
           focused={editing}
           width="flex"
           onExpose={() => onEdit(category.id, monthIndex)}
-          style={[editing && { zIndex: 100 }, styles.tnum]}
+          style={{ ...(editing && { zIndex: 100 }), ...styles.tnum }}
           textAlign="right"
-          valueStyle={[
-            {
-              cursor: 'default',
-              margin: 1,
-              padding: '0 4px',
-              borderRadius: 4,
-            },
-            {
-              ':hover': {
-                boxShadow: 'inset 0 0 0 1px ' + colors.n7,
-                backgroundColor: 'white',
-              },
+          valueStyle={{
+            cursor: 'default',
+            margin: 1,
+            padding: '0 4px',
+            borderRadius: 4,
+            ':hover': {
+              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
+              backgroundColor: 'white',
             },
-          ]}
+          }}
           valueProps={{
             binding: reportBudget.catBudgeted(category.id),
             type: 'financial',
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index e2a7e796d72..c6778fd83e1 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -37,25 +37,23 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
   const format = useFormat();
   return (
     <View
-      style={[
-        {
-          flexDirection: 'row',
-          lineHeight: 1.5,
-          justifyContent: 'center',
-        },
-        !collapsed && {
+      style={{
+        flexDirection: 'row',
+        lineHeight: 1.5,
+        justifyContent: 'center',
+        ...(!collapsed && {
           padding: '5px 0',
           marginTop: 17,
           backgroundColor: colors.n11,
           borderTopWidth: 1,
           borderBottomWidth: 1,
           borderColor: colors.n9,
-        },
-        collapsed && {
+        }),
+        ...(collapsed && {
           padding: 7,
-        },
-        styles.smallText,
-      ]}
+        }),
+        ...styles.smallText,
+      }}
     >
       <View
         style={{
@@ -108,7 +106,7 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
             let v = format(value, 'financial');
             return value > 0 ? '+' + v : value === 0 ? '-' + v : v;
           }}
-          style={[{ fontWeight: 600 }, styles.tnum]}
+          style={{ fontWeight: 600, ...styles.tnum }}
         />
 
         <CellValue
@@ -118,7 +116,7 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
             let v = format(value, 'financial');
             return value > 0 ? '+' + v : value === 0 ? '-' + v : v;
           }}
-          style={[{ fontWeight: 600 }, styles.tnum]}
+          style={{ fontWeight: 600, ...styles.tnum }}
         />
 
         <CellValue
@@ -129,7 +127,7 @@ function TotalsList({ prevMonthName, collapsed }: TotalsListProps) {
             let v = format(Math.abs(n), 'financial');
             return n >= 0 ? '-' + v : '+' + v;
           }}
-          style={[{ fontWeight: 600 }, styles.tnum]}
+          style={{ fontWeight: 600, ...styles.tnum }}
         />
       </View>
 
@@ -312,10 +310,10 @@ export function BudgetSummary({
     >
       <NamespaceContext.Provider value={monthUtils.sheetForMonth(month)}>
         <View
-          style={[
-            { padding: '0 13px' },
-            collapsed ? { margin: '10px 0' } : { marginTop: 16 },
-          ]}
+          style={{
+            padding: '0 13px',
+            ...(collapsed ? { margin: '10px 0' } : { marginTop: 16 }),
+          }}
         >
           <View
             style={{
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
index 58182594758..2e6114f87c9 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -6,7 +6,7 @@ import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
 import useFeatureFlag from '../../../hooks/useFeatureFlag';
 import CheveronDown from '../../../icons/v1/CheveronDown';
-import { styles, colors } from '../../../style';
+import { styles, colors, type CSSProperties } from '../../../style';
 import CategoryAutocomplete from '../../autocomplete/CategoryAutocomplete';
 import Button from '../../common/Button';
 import InitialFocus from '../../common/InitialFocus';
@@ -187,7 +187,11 @@ function BalanceTooltip({
   );
 }
 
-let headerLabelStyle = { flex: 1, padding: '0 5px', textAlign: 'right' };
+let headerLabelStyle: CSSProperties = {
+  flex: 1,
+  padding: '0 5px',
+  textAlign: 'right',
+};
 
 export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
   const format = useFormat();
@@ -260,7 +264,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         name="budgeted"
         width="flex"
         textAlign="right"
-        style={[{ fontWeight: 600 }, styles.tnum]}
+        style={{ fontWeight: 600, ...styles.tnum }}
         valueProps={{
           binding: rolloverBudget.groupBudgeted(id),
           type: 'financial',
@@ -270,7 +274,7 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         name="spent"
         width="flex"
         textAlign="right"
-        style={[{ fontWeight: 600 }, styles.tnum]}
+        style={{ fontWeight: 600, ...styles.tnum }}
         valueProps={{
           binding: rolloverBudget.groupSumAmount(id),
           type: 'financial',
@@ -280,10 +284,11 @@ export const ExpenseGroupMonth = memo(function ExpenseGroupMonth({
         name="balance"
         width="flex"
         textAlign="right"
-        style={[
-          { fontWeight: 600, paddingRight: MONTH_RIGHT_PADDING },
-          styles.tnum,
-        ]}
+        style={{
+          fontWeight: 600,
+          paddingRight: MONTH_RIGHT_PADDING,
+          ...styles.tnum,
+        }}
         valueProps={{
           binding: rolloverBudget.groupBalance(id),
           type: 'financial',
@@ -414,22 +419,18 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           focused={editing}
           width="flex"
           onExpose={() => onEdit(category.id, monthIndex)}
-          style={[editing && { zIndex: 100 }, styles.tnum]}
+          style={{ ...(editing && { zIndex: 100 }), ...styles.tnum }}
           textAlign="right"
-          valueStyle={[
-            {
-              cursor: 'default',
-              margin: 1,
-              padding: '0 4px',
-              borderRadius: 4,
-            },
-            {
-              ':hover': {
-                boxShadow: 'inset 0 0 0 1px ' + colors.n7,
-                backgroundColor: 'white',
-              },
+          valueStyle={{
+            cursor: 'default',
+            margin: 1,
+            padding: '0 4px',
+            borderRadius: 4,
+            ':hover': {
+              boxShadow: 'inset 0 0 0 1px ' + colors.n7,
+              backgroundColor: 'white',
             },
-          ]}
+          }}
           valueProps={{
             binding: rolloverBudget.catBudgeted(category.id),
             type: 'financial',
@@ -504,10 +505,11 @@ export function IncomeGroupMonth() {
         name="received"
         width="flex"
         textAlign="right"
-        style={[
-          { fontWeight: 600, paddingRight: MONTH_RIGHT_PADDING },
-          styles.tnum,
-        ]}
+        style={{
+          fontWeight: 600,
+          paddingRight: MONTH_RIGHT_PADDING,
+          ...styles.tnum,
+        }}
         valueProps={{
           binding: rolloverBudget.groupIncomeReceived,
           type: 'financial',
@@ -539,10 +541,11 @@ export function IncomeCategoryMonth({
       <Field
         name="received"
         width="flex"
-        style={[
-          { paddingRight: MONTH_RIGHT_PADDING, textAlign: 'right' },
-          isLast && { borderBottomWidth: 0 },
-        ]}
+        style={{
+          paddingRight: MONTH_RIGHT_PADDING,
+          textAlign: 'right',
+          ...(isLast && { borderBottomWidth: 0 }),
+        }}
       >
         <span
           onClick={() => onShowActivity(category.name, category.id, monthIndex)}
diff --git a/packages/desktop-client/src/components/common/AlignedText.tsx b/packages/desktop-client/src/components/common/AlignedText.tsx
index 1636bf17cc9..a119449a397 100644
--- a/packages/desktop-client/src/components/common/AlignedText.tsx
+++ b/packages/desktop-client/src/components/common/AlignedText.tsx
@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 
-import { type CSSProperties } from 'glamor';
+import { type CSSProperties } from '../../style';
 
 import Block from './Block';
 import View from './View';
@@ -22,7 +22,7 @@ export default function AlignedText({
   truncate = 'left',
   ...nativeProps
 }: AlignedTextProps) {
-  const truncateStyle = {
+  const truncateStyle: CSSProperties = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -30,24 +30,25 @@ export default function AlignedText({
 
   return (
     <View
-      style={[{ flexDirection: 'row', alignItems: 'center' }, style]}
+      style={{ flexDirection: 'row', alignItems: 'center', ...style }}
       {...nativeProps}
     >
       <Block
-        style={[
-          { marginRight: 10 },
-          truncate === 'left' && truncateStyle,
-          leftStyle,
-        ]}
+        style={{
+          marginRight: 10,
+          ...(truncate === 'left' && truncateStyle),
+          ...leftStyle,
+        }}
       >
         {left}
       </Block>
       <Block
-        style={[
-          { flex: 1, textAlign: 'right' },
-          truncate === 'right' && truncateStyle,
-          rightStyle,
-        ]}
+        style={{
+          flex: 1,
+          textAlign: 'right',
+          ...(truncate === 'right' && truncateStyle),
+          ...rightStyle,
+        }}
       >
         {right}
       </Block>
diff --git a/packages/desktop-client/src/components/common/AnchorLink.tsx b/packages/desktop-client/src/components/common/AnchorLink.tsx
index 3f9ae4b6f11..c5137477078 100644
--- a/packages/desktop-client/src/components/common/AnchorLink.tsx
+++ b/packages/desktop-client/src/components/common/AnchorLink.tsx
@@ -1,9 +1,9 @@
 import { type ReactNode } from 'react';
 import { NavLink, useMatch } from 'react-router-dom';
 
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
 
-import { styles } from '../../style';
+import { type CSSProperties, styles } from '../../style';
 
 type AnchorLinkProps = {
   to: string;
diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index f986b1c2fbb..6d69ba1fddf 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -1,10 +1,8 @@
-import { type Ref } from 'react';
+import { type HTMLProps, type Ref } from 'react';
 
 import { css } from 'glamor';
 
-import type { HTMLPropsWithStyle } from '../../types/utils';
-
-type BlockProps = HTMLPropsWithStyle<HTMLDivElement> & {
+type BlockProps = HTMLProps<HTMLDivElement> & {
   innerRef?: Ref<HTMLDivElement>;
 };
 
diff --git a/packages/desktop-client/src/components/common/Button.tsx b/packages/desktop-client/src/components/common/Button.tsx
index 8d05afe8fc0..6b5355d7efc 100644
--- a/packages/desktop-client/src/components/common/Button.tsx
+++ b/packages/desktop-client/src/components/common/Button.tsx
@@ -1,20 +1,20 @@
-import React, { forwardRef, type ElementType } from 'react';
+import React, { forwardRef, type ElementType, type HTMLProps } from 'react';
 
-import { css, type CSSProperties } from 'glamor';
+import { css } from 'glamor';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { styles, theme } from '../../style';
-import { type HTMLPropsWithStyle } from '../../types/utils';
+import { type CSSProperties, styles, theme } from '../../style';
 
 import View from './View';
 
-type ButtonProps = HTMLPropsWithStyle<HTMLButtonElement> & {
+type ButtonProps = HTMLProps<HTMLButtonElement> & {
   pressed?: boolean;
   hover?: boolean;
   type?: ButtonType;
   isSubmit?: boolean;
   disabled?: boolean;
   color?: string;
+  style?: CSSProperties;
   hoveredStyle?: CSSProperties;
   activeStyle?: CSSProperties;
   textStyle?: CSSProperties;
@@ -92,16 +92,14 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     let typeWithDisabled = disabled ? type + 'Disabled' : type;
 
-    hoveredStyle = [
-      type !== 'bare' && styles.shadow,
-      {
-        backgroundColor: backgroundColorHover[type],
-        color: color || textColorHover[type],
-      },
-      hoveredStyle,
-    ];
-    activeStyle = [
-      type === 'bare'
+    hoveredStyle = {
+      ...(type !== 'bare' && styles.shadow),
+      backgroundColor: backgroundColorHover[type],
+      color: color || textColorHover[type],
+      ...hoveredStyle,
+    };
+    activeStyle = {
+      ...(type === 'bare'
         ? { backgroundColor: theme.buttonBareBackgroundActive }
         : {
             transform: bounce && 'translateY(1px)',
@@ -111,37 +109,33 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                 ? theme.buttonPrimaryShadow
                 : theme.buttonNormalShadow),
             transition: 'none',
-          },
-      activeStyle,
-    ];
+          }),
+      ...activeStyle,
+    };
 
     let Component = as;
-    let buttonStyle = [
-      {
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexShrink: 0,
-        padding: type === 'bare' ? '5px' : '5px 10px',
-        margin: 0,
-        overflow: 'hidden',
-        display: 'flex',
-        borderRadius: 4,
-        backgroundColor: backgroundColor[typeWithDisabled],
-        border:
-          type === 'bare'
-            ? 'none'
-            : '1px solid ' + borderColor[typeWithDisabled],
-        color: color || textColor[typeWithDisabled],
-        transition: 'box-shadow .25s',
-        WebkitAppRegion: 'no-drag',
-        ...styles.smallText,
-      },
-      { ':hover': !disabled && hoveredStyle },
-      { ':active': !disabled && activeStyle },
-      hover && hoveredStyle,
-      pressed && activeStyle,
-      style,
-    ];
+    let buttonStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      padding: type === 'bare' ? '5px' : '5px 10px',
+      margin: 0,
+      overflow: 'hidden',
+      display: 'flex',
+      borderRadius: 4,
+      backgroundColor: backgroundColor[typeWithDisabled],
+      border:
+        type === 'bare' ? 'none' : '1px solid ' + borderColor[typeWithDisabled],
+      color: color || textColor[typeWithDisabled],
+      transition: 'box-shadow .25s',
+      WebkitAppRegion: 'no-drag',
+      ...styles.smallText,
+      ':hover': !disabled && hoveredStyle,
+      ':active': !disabled && activeStyle,
+      ...(hover && hoveredStyle),
+      ...(pressed && activeStyle),
+      ...style,
+    };
 
     return (
       <Component
@@ -172,7 +166,7 @@ export const ButtonWithLoading = forwardRef<
     <Button
       {...buttonProps}
       ref={ref}
-      style={[{ position: 'relative' }, buttonProps.style]}
+      style={{ position: 'relative', ...buttonProps.style }}
     >
       {loading && (
         <View
diff --git a/packages/desktop-client/src/components/common/ButtonLink.tsx b/packages/desktop-client/src/components/common/ButtonLink.tsx
index 2f0d8561c79..dca78f6c2d4 100644
--- a/packages/desktop-client/src/components/common/ButtonLink.tsx
+++ b/packages/desktop-client/src/components/common/ButtonLink.tsx
@@ -1,7 +1,7 @@
 import React, { type ComponentProps } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
 
-import { type CSSProperties } from 'glamor';
+import { type CSSProperties } from '../../style';
 
 import Button from './Button';
 
diff --git a/packages/desktop-client/src/components/common/Card.tsx b/packages/desktop-client/src/components/common/Card.tsx
index dc9a3f2b8ac..4a6bcf8fb20 100644
--- a/packages/desktop-client/src/components/common/Card.tsx
+++ b/packages/desktop-client/src/components/common/Card.tsx
@@ -12,18 +12,16 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
       <View
         {...props}
         ref={ref}
-        style={[
-          {
-            marginTop: 15,
-            marginLeft: 5,
-            marginRight: 5,
-            borderRadius: 6,
-            backgroundColor: 'white',
-            borderColor: colors.p3,
-            boxShadow: '0 1px 2px #9594A8',
-          },
-          props.style,
-        ]}
+        style={{
+          marginTop: 15,
+          marginLeft: 5,
+          marginRight: 5,
+          borderRadius: 6,
+          backgroundColor: 'white',
+          borderColor: colors.p3,
+          boxShadow: '0 1px 2px #9594A8',
+          ...props.style,
+        }}
       >
         <View
           style={{
diff --git a/packages/desktop-client/src/components/common/FormError.tsx b/packages/desktop-client/src/components/common/FormError.tsx
index 90854653fd1..505388caf4a 100644
--- a/packages/desktop-client/src/components/common/FormError.tsx
+++ b/packages/desktop-client/src/components/common/FormError.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
+import { type CSSProperties } from '../../style';
 
 import View from './View';
 
@@ -11,6 +11,6 @@ type FormErrorProps = {
 
 export default function FormError({ style, children }: FormErrorProps) {
   return (
-    <View style={[{ color: 'red', fontSize: 13 }, style]}>{children}</View>
+    <View style={{ color: 'red', fontSize: 13, ...style }}>{children}</View>
   );
 }
diff --git a/packages/desktop-client/src/components/common/HoverTarget.tsx b/packages/desktop-client/src/components/common/HoverTarget.tsx
index 60f29f5b16e..d22bd57958f 100644
--- a/packages/desktop-client/src/components/common/HoverTarget.tsx
+++ b/packages/desktop-client/src/components/common/HoverTarget.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState, type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
+import { type CSSProperties } from '../../style';
 
 import View from './View';
 
diff --git a/packages/desktop-client/src/components/common/InlineField.tsx b/packages/desktop-client/src/components/common/InlineField.tsx
index b461bc47224..2fc45fa6327 100644
--- a/packages/desktop-client/src/components/common/InlineField.tsx
+++ b/packages/desktop-client/src/components/common/InlineField.tsx
@@ -1,6 +1,8 @@
 import { type ReactNode } from 'react';
 
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
+
+import { type CSSProperties } from '../../style';
 
 type InlineFieldProps = {
   label: ReactNode;
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index c55c6ac15ac..f31ac0bac99 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -1,11 +1,15 @@
-import React, { useRef, type KeyboardEvent, type Ref } from 'react';
+import React, {
+  useRef,
+  type KeyboardEvent,
+  type Ref,
+  type HTMLProps,
+} from 'react';
 import mergeRefs from 'react-merge-refs';
 
 import { css } from 'glamor';
 
 import { useProperFocus } from '../../hooks/useProperFocus';
-import { styles, theme } from '../../style';
-import { type HTMLPropsWithStyle } from '../../types/utils';
+import { type CSSProperties, styles, theme } from '../../style';
 
 export const defaultInputStyle = {
   outline: 0,
@@ -17,7 +21,8 @@ export const defaultInputStyle = {
   border: '1px solid ' + theme.formInputBorder,
 };
 
-type InputProps = HTMLPropsWithStyle<HTMLInputElement> & {
+type InputProps = HTMLProps<HTMLInputElement> & {
+  style?: CSSProperties;
   inputRef?: Ref<HTMLInputElement>;
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onUpdate?: (newValue: string) => void;
@@ -75,16 +80,14 @@ export function BigInput(props: InputProps) {
   return (
     <Input
       {...props}
-      style={[
-        {
-          padding: 10,
-          fontSize: 15,
-          border: 'none',
-          ...styles.shadow,
-          ':focus': { border: 'none', ...styles.shadow },
-        },
-        props.style,
-      ]}
+      style={{
+        padding: 10,
+        fontSize: 15,
+        border: 'none',
+        ...styles.shadow,
+        ':focus': { border: 'none', ...styles.shadow },
+        ...props.style,
+      }}
     />
   );
 }
diff --git a/packages/desktop-client/src/components/common/InputWithContent.tsx b/packages/desktop-client/src/components/common/InputWithContent.tsx
index 43419d7b772..01c21a35a95 100644
--- a/packages/desktop-client/src/components/common/InputWithContent.tsx
+++ b/packages/desktop-client/src/components/common/InputWithContent.tsx
@@ -1,8 +1,6 @@
-import { type ComponentProps, type ReactNode, useState } from 'react';
+import { useState, type ComponentProps, type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 
 import Input, { defaultInputStyle } from './Input';
 import View from './View';
@@ -28,36 +26,32 @@ export default function InputWithContent({
 
   return (
     <View
-      style={[
-        defaultInputStyle,
-        {
-          padding: 0,
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-        style,
-        focused &&
+      style={{
+        ...defaultInputStyle,
+        padding: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        ...style,
+        ...(focused &&
           (focusStyle ?? {
             boxShadow: '0 0 0 1px ' + theme.formInputShadowSelected,
-          }),
-        getStyle && getStyle(focused),
-      ]}
+          })),
+        ...(getStyle && getStyle(focused)),
+      }}
     >
       {leftContent}
       <Input
         {...props}
-        style={[
-          inputStyle,
-          {
-            flex: 1,
-            '&, &:focus, &:hover': {
-              border: 0,
-              backgroundColor: 'transparent',
-              boxShadow: 'none',
-              color: 'inherit',
-            },
+        style={{
+          ...inputStyle,
+          flex: 1,
+          '&, &:focus, &:hover': {
+            border: 0,
+            backgroundColor: 'transparent',
+            boxShadow: 'none',
+            color: 'inherit',
           },
-        ]}
+        }}
         onFocus={e => {
           setFocused(true);
           props.onFocus?.(e);
diff --git a/packages/desktop-client/src/components/common/Label.tsx b/packages/desktop-client/src/components/common/Label.tsx
index 895f4dcf0d6..85ef99ce403 100644
--- a/packages/desktop-client/src/components/common/Label.tsx
+++ b/packages/desktop-client/src/components/common/Label.tsx
@@ -1,8 +1,6 @@
 import { type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
-import { colors, styles } from '../../style';
+import { type CSSProperties, colors, styles } from '../../style';
 
 import Text from './Text';
 
@@ -14,16 +12,14 @@ type LabelProps = {
 export default function Label({ title, style }: LabelProps) {
   return (
     <Text
-      style={[
-        styles.text,
-        {
-          color: colors.n2,
-          textAlign: 'right',
-          fontSize: 12,
-          marginBottom: 2,
-        },
-        style,
-      ]}
+      style={{
+        ...styles.text,
+        color: colors.n2,
+        textAlign: 'right',
+        fontSize: 12,
+        marginBottom: 2,
+        ...style,
+      }}
     >
       {title}
     </Text>
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
index 06d7d472c82..84ced272fbf 100644
--- a/packages/desktop-client/src/components/common/Menu.tsx
+++ b/packages/desktop-client/src/components/common/Menu.tsx
@@ -137,27 +137,25 @@ export default function Menu({
           <View
             role="button"
             key={item.name}
-            style={[
-              {
-                cursor: 'default',
-                padding: '9px 10px',
-                marginTop:
-                  idx === 0 ||
-                  lastItem === Menu.line ||
-                  lastItem.type === Menu.label
-                    ? 0
-                    : -3,
-                flexDirection: 'row',
-                alignItems: 'center',
-                color: theme.menuItemText,
-              },
-              item.disabled && { color: theme.buttonBareDisabledText },
-              !item.disabled &&
+            style={{
+              cursor: 'default',
+              padding: '9px 10px',
+              marginTop:
+                idx === 0 ||
+                lastItem === Menu.line ||
+                lastItem.type === Menu.label
+                  ? 0
+                  : -3,
+              flexDirection: 'row',
+              alignItems: 'center',
+              color: theme.menuItemText,
+              ...(item.disabled && { color: theme.buttonBareDisabledText }),
+              ...(!item.disabled &&
                 hoveredIndex === idx && {
                   backgroundColor: theme.menuItemBackgroundHover,
                   color: theme.menuItemTextHover,
-                },
-            ]}
+                }),
+            }}
             onMouseEnter={() => setHoveredIndex(idx)}
             onMouseLeave={() => setHoveredIndex(null)}
             onClick={e =>
diff --git a/packages/desktop-client/src/components/common/Modal.tsx b/packages/desktop-client/src/components/common/Modal.tsx
index 99515a20100..2bab19bc7f5 100644
--- a/packages/desktop-client/src/components/common/Modal.tsx
+++ b/packages/desktop-client/src/components/common/Modal.tsx
@@ -1,17 +1,16 @@
 import React, {
-  type ReactNode,
   useEffect,
   useRef,
   useLayoutEffect,
+  type ReactNode,
 } from 'react';
 import ReactModal from 'react-modal';
 
-import type { CSSProperties } from 'glamor';
 import hotkeys from 'hotkeys-js';
 
 import AnimatedLoading from '../../icons/AnimatedLoading';
 import Delete from '../../icons/v0/Delete';
-import { styles, theme } from '../../style';
+import { type CSSProperties, styles, theme } from '../../style';
 import tokens from '../../tokens';
 
 import Button from './Button';
@@ -118,24 +117,22 @@ const Modal = ({
         noAnimation={noAnimation}
         isCurrent={isCurrent}
         size={size}
-        style={[
-          {
-            willChange: 'opacity, transform',
-            minWidth: '100%',
-            minHeight: 0,
-            borderRadius: 4,
-            //border: '1px solid ' + theme.modalBorder,
-            color: theme.pageText,
-            backgroundColor: theme.modalBackground,
-            opacity: isHidden ? 0 : 1,
-            [`@media (min-width: ${tokens.breakpoint_small})`]: {
-              minWidth: tokens.breakpoint_small,
-            },
+        style={{
+          willChange: 'opacity, transform',
+          minWidth: '100%',
+          minHeight: 0,
+          borderRadius: 4,
+          //border: '1px solid ' + theme.modalBorder,
+          color: theme.pageText,
+          backgroundColor: theme.modalBackground,
+          opacity: isHidden ? 0 : 1,
+          [`@media (min-width: ${tokens.breakpoint_small})`]: {
+            minWidth: tokens.breakpoint_small,
           },
-          styles.shadowLarge,
-          style,
-          styles.lightScrollbar,
-        ]}
+          ...styles.shadowLarge,
+          ...style,
+          ...styles.lightScrollbar,
+        }}
       >
         {showHeader && (
           <View
@@ -298,11 +295,11 @@ const ModalContent = ({
   return (
     <View
       innerRef={contentRef}
-      style={[
-        style,
-        size && { width: size.width, height: size.height },
-        noAnimation && !isCurrent && { display: 'none' },
-      ]}
+      style={{
+        ...style,
+        ...(size && { width: size.width, height: size.height }),
+        ...(noAnimation && !isCurrent && { display: 'none' }),
+      }}
     >
       {children}
     </View>
@@ -339,13 +336,11 @@ export const ModalButtons = ({
   return (
     <View
       innerRef={containerRef}
-      style={[
-        {
-          flexDirection: 'row',
-          marginTop: 30,
-        },
-        style,
-      ]}
+      style={{
+        flexDirection: 'row',
+        marginTop: 30,
+        ...style,
+      }}
     >
       {leftContent}
       <View style={{ flex: 1 }} />
diff --git a/packages/desktop-client/src/components/common/Paragraph.tsx b/packages/desktop-client/src/components/common/Paragraph.tsx
index a938a643db6..df3553f1b63 100644
--- a/packages/desktop-client/src/components/common/Paragraph.tsx
+++ b/packages/desktop-client/src/components/common/Paragraph.tsx
@@ -1,8 +1,11 @@
+import { type HTMLProps } from 'react';
+
 import { css } from 'glamor';
 
-import { type HTMLPropsWithStyle } from '../../types/utils';
+import { type CSSProperties } from '../../style';
 
-type ParagraphProps = HTMLPropsWithStyle<HTMLDivElement> & {
+type ParagraphProps = HTMLProps<HTMLDivElement> & {
+  style?: CSSProperties;
   isLast?: boolean;
 };
 
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index fb1b984d066..6d1bfd3221c 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -5,10 +5,10 @@ import {
   ListboxList,
   ListboxOption,
 } from '@reach/listbox';
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
 
 import ExpandArrow from '../../icons/v0/ExpandArrow';
-import { theme, styles } from '../../style';
+import { theme, styles, type CSSProperties } from '../../style';
 
 type SelectProps<Value extends string> = {
   bare?: boolean;
@@ -49,13 +49,7 @@ export default function Select<Value extends string>({
   disabledKeys = [],
 }: SelectProps<Value>) {
   const arrowSize = 7;
-  const checkHeight = !style
-    ? '18px'
-    : style.minHeight
-    ? style.minHeight
-    : !style[0]
-    ? '18px'
-    : style[0].minHeight ?? '18px';
+  const minHeight = style?.minHeight ? style.minHeight : '18px';
   const targetOption = options.filter(option => option[0] === value);
   return (
     <ListboxInput
@@ -90,7 +84,7 @@ export default function Select<Value extends string>({
             whiteSpace: 'nowrap',
             maxWidth: `calc(100% - ${arrowSize + 5}px)`,
             alignItems: 'center',
-            minHeight: checkHeight,
+            minHeight: minHeight,
           }}
         >
           {targetOption.length !== 0 ? targetOption[0][1] : defaultLabel}
diff --git a/packages/desktop-client/src/components/common/Stack.tsx b/packages/desktop-client/src/components/common/Stack.tsx
index cbef33dcf23..a59cf5a9fc3 100644
--- a/packages/desktop-client/src/components/common/Stack.tsx
+++ b/packages/desktop-client/src/components/common/Stack.tsx
@@ -7,6 +7,8 @@ import React, {
   type ReactNode,
 } from 'react';
 
+import { type CSSProperties } from '../../style';
+
 import Text from './Text';
 import View from './View';
 
@@ -28,7 +30,7 @@ function getChildren(key, children) {
 }
 
 type StackProps = ComponentProps<typeof View> & {
-  direction?: string;
+  direction?: CSSProperties['flexDirection'];
   align?: string;
   justify?: string;
   spacing?: number;
@@ -54,14 +56,12 @@ const Stack = forwardRef<HTMLDivElement, StackProps>(
 
     return (
       <View
-        style={[
-          {
-            flexDirection: direction,
-            alignItems: align,
-            justifyContent: justify,
-          },
-          style,
-        ]}
+        style={{
+          flexDirection: direction,
+          alignItems: align,
+          justifyContent: justify,
+          ...style,
+        }}
         innerRef={ref}
         {...props}
       >
@@ -79,11 +79,11 @@ const Stack = forwardRef<HTMLDivElement, StackProps>(
             typeof child === 'string' ? <Text>{child}</Text> : child,
             {
               key,
-              style: [
-                debug && { borderWidth: 1, borderColor: 'red' },
-                isLastChild ? null : { [marginProp]: spacing * 5 },
-                child.props ? child.props.style : null,
-              ],
+              style: {
+                ...(debug && { borderWidth: 1, borderColor: 'red' }),
+                ...(isLastChild ? null : { [marginProp]: spacing * 5 }),
+                ...(child.props ? child.props.style : null),
+              },
             },
           );
         })}
diff --git a/packages/desktop-client/src/components/common/Text.tsx b/packages/desktop-client/src/components/common/Text.tsx
index 8546e1e732c..296385bee31 100644
--- a/packages/desktop-client/src/components/common/Text.tsx
+++ b/packages/desktop-client/src/components/common/Text.tsx
@@ -1,13 +1,14 @@
-import React, { type Ref, type ReactNode } from 'react';
+import React, { type HTMLProps, type Ref, type ReactNode } from 'react';
 
 import { css } from 'glamor';
 
-import { type HTMLPropsWithStyle } from '../../types/utils';
+import { type CSSProperties } from '../../style';
 
-type TextProps = HTMLPropsWithStyle<HTMLSpanElement> & {
+type TextProps = HTMLProps<HTMLSpanElement> & {
   innerRef?: Ref<HTMLSpanElement>;
   className?: string;
   children?: ReactNode;
+  style?: CSSProperties;
 };
 
 const Text = (props: TextProps) => {
@@ -16,7 +17,7 @@ const Text = (props: TextProps) => {
     <span
       {...restProps}
       ref={innerRef}
-      className={String(css([props.className, props.style]))}
+      className={`${props.className} ${css(props.style)}`}
     />
   );
 };
diff --git a/packages/desktop-client/src/components/common/TextOneLine.tsx b/packages/desktop-client/src/components/common/TextOneLine.tsx
index a928c102ace..7f5f9d4d746 100644
--- a/packages/desktop-client/src/components/common/TextOneLine.tsx
+++ b/packages/desktop-client/src/components/common/TextOneLine.tsx
@@ -8,15 +8,13 @@ export default function TextOneLine({ children, ...props }: TextOneLineProps) {
   return (
     <Text
       {...props}
-      style={[
-        props.style,
-        {
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          display: 'block',
-        },
-      ]}
+      style={{
+        ...props.style,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        display: 'block',
+      }}
     >
       {children}
     </Text>
diff --git a/packages/desktop-client/src/components/common/View.tsx b/packages/desktop-client/src/components/common/View.tsx
index 72fea498e88..6b892f79092 100644
--- a/packages/desktop-client/src/components/common/View.tsx
+++ b/packages/desktop-client/src/components/common/View.tsx
@@ -1,11 +1,16 @@
-import React, { type Ref, type StyleHTMLAttributes } from 'react';
+import React, {
+  type HTMLProps,
+  type Ref,
+  type StyleHTMLAttributes,
+} from 'react';
 
 import { css } from 'glamor';
 
-import { type HTMLPropsWithStyle } from '../../types/utils';
+import { type CSSProperties } from '../../style';
 
-type ViewProps = HTMLPropsWithStyle<HTMLDivElement> & {
+type ViewProps = HTMLProps<HTMLDivElement> & {
   className?: string;
+  style?: CSSProperties;
   nativeStyle?: StyleHTMLAttributes<HTMLDivElement>;
   innerRef?: Ref<HTMLDivElement>;
 };
diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
index e5485323241..e74030b9d9b 100644
--- a/packages/desktop-client/src/components/filters/FiltersMenu.js
+++ b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -95,17 +95,18 @@ function OpButton({ op, selected, style, onClick }) {
   return (
     <Button
       type="bare"
-      style={[
-        { backgroundColor: theme.altbuttonMenuBackground, marginBottom: 5 },
-        style,
-        selected && {
+      style={{
+        backgroundColor: theme.altbuttonMenuBackground,
+        marginBottom: 5,
+        ...style,
+        ...(selected && {
           color: theme.buttonNormalSelectedText,
           '&,:hover,:active': {
             backgroundColor: theme.buttonNormalSelectedBackground,
             color: theme.buttonNormalSelectedText,
           },
-        },
-      ]}
+        }),
+      }}
       onClick={onClick}
     >
       {friendlyOp(op)}
@@ -275,13 +276,12 @@ function ConfigureField({
                 style={{ flexWrap: 'wrap' }}
               >
                 {ops.slice(3, ops.length).map(currOp => (
-                  <View key={currOp}>
-                    <OpButton
-                      op={currOp}
-                      selected={currOp === op}
-                      onClick={() => dispatch({ type: 'set-op', op: currOp })}
-                    />
-                  </View>
+                  <OpButton
+                    key={currOp}
+                    op={currOp}
+                    selected={currOp === op}
+                    onClick={() => dispatch({ type: 'set-op', op: currOp })}
+                  />
                 ))}
               </Stack>
             </>
@@ -501,17 +501,15 @@ function FilterExpression({
 
   return (
     <View
-      style={[
-        {
-          backgroundColor: theme.pillBackground,
-          borderRadius: 4,
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginRight: 10,
-          marginTop: 10,
-        },
-        style,
-      ]}
+      style={{
+        backgroundColor: theme.pillBackground,
+        borderRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: 10,
+        marginTop: 10,
+        ...style,
+      }}
     >
       <Button
         type="bare"
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index a34fdbd5986..a3ad654afa6 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -1,8 +1,8 @@
 import React, { type ReactNode, type HTMLProps } from 'react';
 
-import { css, type CSSProperties } from 'glamor';
+import { css } from 'glamor';
 
-import { theme } from '../style';
+import { type CSSProperties, theme } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -15,16 +15,14 @@ type SectionLabelProps = {
 export const SectionLabel = ({ title, style }: SectionLabelProps) => {
   return (
     <View
-      style={[
-        {
-          fontWeight: 500,
-          textTransform: 'uppercase',
-          color: theme.altFormLabelText,
-          marginBottom: 5,
-          lineHeight: '1em',
-        },
-        style,
-      ]}
+      style={{
+        fontWeight: 500,
+        textTransform: 'uppercase',
+        color: theme.altFormLabelText,
+        marginBottom: 5,
+        lineHeight: '1em',
+        ...style,
+      }}
     >
       {title}
     </View>
@@ -41,7 +39,12 @@ type FormLabelProps = {
 export const FormLabel = ({ style, title, id, htmlFor }: FormLabelProps) => {
   return (
     <Text
-      style={[{ fontSize: 13, marginBottom: 3, color: theme.tableText }, style]}
+      style={{
+        fontSize: 13,
+        marginBottom: 3,
+        color: theme.tableText,
+        ...style,
+      }}
     >
       <label htmlFor={htmlFor} id={id}>
         {title}
@@ -61,8 +64,8 @@ export const FormField = ({ style, children }: FormFieldProps) => {
 
 // Custom inputs
 
-type CheckboxProps = Omit<HTMLProps<HTMLInputElement>, 'type' | 'styles'> & {
-  styles?: CSSProperties;
+type CheckboxProps = Omit<HTMLProps<HTMLInputElement>, 'type'> & {
+  style?: CSSProperties;
 };
 
 export const Checkbox = (props: CheckboxProps) => {
@@ -116,7 +119,7 @@ export const Checkbox = (props: CheckboxProps) => {
             },
           },
         ],
-        props.styles,
+        props.style,
       )}
     />
   );
diff --git a/packages/desktop-client/src/components/manager/BudgetList.js b/packages/desktop-client/src/components/manager/BudgetList.js
index cbea84d23eb..d127914b671 100644
--- a/packages/desktop-client/src/components/manager/BudgetList.js
+++ b/packages/desktop-client/src/components/manager/BudgetList.js
@@ -152,26 +152,24 @@ function File({ file, onSelect, onDelete }) {
     <View
       onClick={() => _onSelect(file)}
       title={getFileDescription(file)}
-      style={[
-        {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          ...styles.shadow,
-          margin: 10,
-          padding: '12px 15px',
-          backgroundColor: 'white',
-          borderRadius: 6,
-          flexShrink: 0,
-          cursor: 'pointer',
-          ':hover': {
-            backgroundColor: colors.hover,
-          },
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        ...styles.shadow,
+        margin: 10,
+        padding: '12px 15px',
+        backgroundColor: 'white',
+        borderRadius: 6,
+        flexShrink: 0,
+        cursor: 'pointer',
+        ':hover': {
+          backgroundColor: colors.hover,
         },
-      ]}
+      }}
     >
       <View style={{ alignItems: 'flex-start' }}>
-        <Text style={[{ fontSize: 16, fontWeight: 700 }]}>{file.name}</Text>
+        <Text style={{ fontSize: 16, fontWeight: 700 }}>{file.name}</Text>
 
         <FileState file={file} />
       </View>
@@ -279,7 +277,7 @@ export default function BudgetList() {
       }}
     >
       <View>
-        <Text style={[styles.veryLargeText, { margin: 20 }]}>Files</Text>
+        <Text style={{ ...styles.veryLargeText, margin: 20 }}>Files</Text>
         <View
           style={{
             position: 'absolute',
diff --git a/packages/desktop-client/src/components/manager/DeleteFile.js b/packages/desktop-client/src/components/manager/DeleteFile.js
index 025dec7c0ca..dc0e38bcd14 100644
--- a/packages/desktop-client/src/components/manager/DeleteFile.js
+++ b/packages/desktop-client/src/components/manager/DeleteFile.js
@@ -103,14 +103,12 @@ export default function DeleteMenu({ modalProps, actions, file }) {
               <ButtonWithLoading
                 type={isRemote ? 'normal' : 'primary'}
                 loading={loadingState === 'local'}
-                style={[
-                  {
-                    alignSelf: 'center',
-                    marginTop: 10,
-                    padding: '10px 30px',
-                    fontSize: 14,
-                  },
-                  isRemote
+                style={{
+                  alignSelf: 'center',
+                  marginTop: 10,
+                  padding: '10px 30px',
+                  fontSize: 14,
+                  ...(isRemote
                     ? {
                         color: colors.r4,
                         borderColor: colors.r4,
@@ -118,8 +116,8 @@ export default function DeleteMenu({ modalProps, actions, file }) {
                     : {
                         border: 0,
                         backgroundColor: colors.r4,
-                      },
-                ]}
+                      }),
+                }}
                 onClick={onDeleteLocal}
               >
                 Delete file locally
diff --git a/packages/desktop-client/src/components/manager/Import.js b/packages/desktop-client/src/components/manager/Import.js
index 4940a3765b0..08bb54ca5c0 100644
--- a/packages/desktop-client/src/components/manager/Import.js
+++ b/packages/desktop-client/src/components/manager/Import.js
@@ -45,7 +45,7 @@ function Import({ modalProps, actions }) {
   return (
     <Modal {...modalProps} title="Import From" style={{ width: 400 }}>
       {() => (
-        <View style={[styles.smallText, { lineHeight: 1.5 }]}>
+        <View style={{ ...styles.smallText, lineHeight: 1.5 }}>
           {error && (
             <Block style={{ color: colors.r4, marginBottom: 15 }}>
               {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/manager/ImportActual.tsx b/packages/desktop-client/src/components/manager/ImportActual.tsx
index 153b938e393..dbc77423942 100644
--- a/packages/desktop-client/src/components/manager/ImportActual.tsx
+++ b/packages/desktop-client/src/components/manager/ImportActual.tsx
@@ -61,7 +61,7 @@ function Import({ modalProps }: ImportProps) {
       style={{ width: 400 }}
     >
       {() => (
-        <View style={[styles.smallText, { lineHeight: 1.5, marginTop: 20 }]}>
+        <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
             <Block style={{ color: colors.r4, marginBottom: 15 }}>
               {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
index 7ad1a64a9a8..cefe3db03a9 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
@@ -49,7 +49,7 @@ function Import({ modalProps }: ImportProps) {
   return (
     <Modal {...modalProps} title="Import from YNAB4" style={{ width: 400 }}>
       {() => (
-        <View style={[styles.smallText, { lineHeight: 1.5, marginTop: 20 }]}>
+        <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
             <Block style={{ color: colors.r4, marginBottom: 15 }}>
               {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
index a7b5ddadf97..0c1839871d0 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
@@ -52,7 +52,7 @@ function Import({ modalProps }: ImportProps) {
   return (
     <Modal {...modalProps} title="Import from nYNAB" style={{ width: 400 }}>
       {() => (
-        <View style={[styles.smallText, { lineHeight: 1.5, marginTop: 20 }]}>
+        <View style={{ ...styles.smallText, lineHeight: 1.5, marginTop: 20 }}>
           {error && (
             <Block style={{ color: colors.r4, marginBottom: 15 }}>
               {getErrorMessage(error)}
diff --git a/packages/desktop-client/src/components/mobile/MobileAmountInput.js b/packages/desktop-client/src/components/mobile/MobileAmountInput.js
index 95f6ace94e1..c882b44637b 100644
--- a/packages/desktop-client/src/components/mobile/MobileAmountInput.js
+++ b/packages/desktop-client/src/components/mobile/MobileAmountInput.js
@@ -159,17 +159,15 @@ class AmountInput extends PureComponent {
 
     return (
       <View
-        style={[
-          {
-            justifyContent: 'center',
-            borderWidth: 1,
-            borderColor: theme.pillBorderSelected,
-            borderRadius: 4,
-            padding: 5,
-            backgroundColor: 'white',
-          },
-          style,
-        ]}
+        style={{
+          justifyContent: 'center',
+          borderWidth: 1,
+          borderColor: theme.pillBorderSelected,
+          borderRadius: 4,
+          padding: 5,
+          backgroundColor: 'white',
+          ...style,
+        }}
       >
         <View style={{ overflowY: 'auto' }}>{input}</View>
 
@@ -251,21 +249,19 @@ export class FocusableAmountInput extends PureComponent {
           onChange={this.onChange}
           onBlur={this.onBlur}
           focused={focused}
-          style={[
-            {
-              width: 80,
-              transform: [{ translateX: 6 }],
-              justifyContent: 'center',
-            },
-            style,
-            focusedStyle,
-            !focused && {
+          style={{
+            width: 80,
+            transform: [{ translateX: 6 }],
+            justifyContent: 'center',
+            ...style,
+            ...focusedStyle,
+            ...(!focused && {
               opacity: 0,
               position: 'absolute',
               top: 0,
-            },
-          ]}
-          textStyle={[{ fontSize: 15, textAlign: 'right' }, textStyle]}
+            }),
+          }}
+          textStyle={{ fontSize: 15, textAlign: 'right', ...textStyle }}
         />
 
         <View>
@@ -286,29 +282,25 @@ export class FocusableAmountInput extends PureComponent {
             // Defines how far touch can start away from the button
             // hitSlop={{ top: 5, bottom: 5, left: 5, right: 5 }}
             {...buttonProps}
-            style={[
-              buttonProps && buttonProps.style,
-              focused && { display: 'none' },
-              {
-                ':hover': {
-                  backgroundColor: 'transparent',
-                },
+            style={{
+              ...(buttonProps && buttonProps.style),
+              ...(focused && { display: 'none' }),
+              ':hover': {
+                backgroundColor: 'transparent',
               },
-            ]}
+            }}
             type="bare"
           >
             <View
-              style={[
-                {
-                  borderBottomWidth: 1,
-                  borderColor: '#e0e0e0',
-                  justifyContent: 'center',
-                  transform: [{ translateY: 0.5 }],
-                },
-                style,
-              ]}
+              style={{
+                borderBottomWidth: 1,
+                borderColor: '#e0e0e0',
+                justifyContent: 'center',
+                transform: [{ translateY: 0.5 }],
+                ...style,
+              }}
             >
-              <Text style={[{ fontSize: 15, userSelect: 'none' }, textStyle]}>
+              <Text style={{ fontSize: 15, userSelect: 'none', ...textStyle }}>
                 {amountToCurrency(Math.abs(this.props.value))}
               </Text>
             </View>
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.js b/packages/desktop-client/src/components/mobile/MobileForms.js
index d921b5ad579..bf9b0202051 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.js
+++ b/packages/desktop-client/src/components/mobile/MobileForms.js
@@ -14,18 +14,16 @@ const FIELD_HEIGHT = 40;
 export function FieldLabel({ title, flush, style }) {
   return (
     <Text
-      style={[
-        {
-          marginBottom: 5,
-          marginTop: flush ? 0 : 25,
-          fontSize: 13,
-          color: theme.tableRowHeaderText,
-          paddingLeft: EDITING_PADDING,
-          textTransform: 'uppercase',
-          userSelect: 'none',
-        },
-        style,
-      ]}
+      style={{
+        marginBottom: 5,
+        marginTop: flush ? 0 : 25,
+        fontSize: 13,
+        color: theme.tableRowHeaderText,
+        paddingLeft: EDITING_PADDING,
+        textTransform: 'uppercase',
+        userSelect: 'none',
+        ...style,
+      }}
     >
       {title}
     </Text>
@@ -54,15 +52,13 @@ export const InputField = forwardRef(function InputField(
       onBlur={e => {
         onUpdate?.(e.target.value);
       }}
-      style={[
-        valueStyle,
-        style,
-        {
-          backgroundColor: disabled
-            ? theme.formInputTextReadOnlySelection
-            : 'white',
-        },
-      ]}
+      style={{
+        ...valueStyle,
+        ...style,
+        backgroundColor: disabled
+          ? theme.formInputTextReadOnlySelection
+          : 'white',
+      }}
       {...props}
     />
   );
@@ -82,13 +78,16 @@ export function TapField({
     <Button
       as={View}
       onClick={!disabled ? onClick : undefined}
-      style={[
-        { flexDirection: 'row', alignItems: 'center' },
-        style,
-        valueStyle,
-        { backgroundColor: 'white' },
-        disabled && { backgroundColor: theme.formInputTextReadOnlySelection },
-      ]}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        ...style,
+        ...valueStyle,
+        backgroundColor: 'white',
+        ...(disabled && {
+          backgroundColor: theme.formInputTextReadOnlySelection,
+        }),
+      }}
       bounce={false}
       activeStyle={{
         opacity: 0.5,
@@ -103,7 +102,7 @@ export function TapField({
       {children ? (
         children
       ) : (
-        <Text style={[{ flex: 1, userSelect: 'none' }, textStyle]}>
+        <Text style={{ flex: 1, userSelect: 'none', ...textStyle }}>
           {value}
         </Text>
       )}
diff --git a/packages/desktop-client/src/components/modals/BudgetSummary.js b/packages/desktop-client/src/components/modals/BudgetSummary.js
index 8491e3efdff..3adf6022358 100644
--- a/packages/desktop-client/src/components/modals/BudgetSummary.js
+++ b/packages/desktop-client/src/components/modals/BudgetSummary.js
@@ -22,14 +22,12 @@ function ToBudget({ toBudget }) {
         {budgetAmount < 0 ? 'Overbudget:' : 'To budget:'}
       </Text>
       <Text
-        style={[
-          styles.text,
-          {
-            fontWeight: '600',
-            fontSize: 22,
-            color: budgetAmount < 0 ? colors.r4 : colors.n1,
-          },
-        ]}
+        style={{
+          ...styles.text,
+          fontWeight: '600',
+          fontSize: 22,
+          color: budgetAmount < 0 ? colors.r4 : colors.n1,
+        }}
       >
         {format(budgetAmount, 'financial')}
       </Text>
@@ -53,14 +51,12 @@ function BudgetSummary({ month, modalProps }) {
             }}
           >
             <View
-              style={[
-                styles.text,
-                {
-                  fontWeight: '600',
-                  textAlign: 'right',
-                  marginRight: 10,
-                },
-              ]}
+              style={{
+                ...styles.text,
+                fontWeight: '600',
+                textAlign: 'right',
+                marginRight: 10,
+              }}
             >
               <CellValue
                 binding={rolloverBudget.incomeAvailable}
@@ -81,14 +77,12 @@ function BudgetSummary({ month, modalProps }) {
             </View>
 
             <View
-              style={[
-                styles.text,
-                {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  textAlign: 'left',
-                },
-              ]}
+              style={{
+                ...styles.text,
+                display: 'flex',
+                flexDirection: 'column',
+                textAlign: 'left',
+              }}
             >
               <Text>Available Funds</Text>
               <Text>Overspent in {prevMonthName}</Text>
diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
index eee4d0eb4ee..62bd9bffa52 100644
--- a/packages/desktop-client/src/components/modals/EditField.js
+++ b/packages/desktop-client/src/components/modals/EditField.js
@@ -186,16 +186,14 @@ export default function EditField({ modalProps, name, onSubmit }) {
       focusAfterClose={false}
       {...modalProps}
       padding={0}
-      style={[
-        {
-          flex: 0,
-          height: isNarrowWidth ? '85vh' : 275,
-          padding: '15px 10px',
-          borderRadius: '6px',
-        },
-        minWidth && { minWidth },
-        !isNarrowWidth && { backgroundColor: colors.n1, color: 'white' },
-      ]}
+      style={{
+        flex: 0,
+        height: isNarrowWidth ? '85vh' : 275,
+        padding: '15px 10px',
+        borderRadius: '6px',
+        ...(minWidth && { minWidth }),
+        ...(!isNarrowWidth && { backgroundColor: colors.n1, color: 'white' }),
+      }}
     >
       {() => (
         <View>
diff --git a/packages/desktop-client/src/components/modals/EditRule.js b/packages/desktop-client/src/components/modals/EditRule.js
index 644d2024759..603bc30cb8b 100644
--- a/packages/desktop-client/src/components/modals/EditRule.js
+++ b/packages/desktop-client/src/components/modals/EditRule.js
@@ -78,7 +78,7 @@ function getTransactionFields(conditions, actions) {
 
 export function FieldSelect({ fields, style, value, onChange }) {
   return (
-    <View style={[{ color: theme.pageTextPositive }, style]}>
+    <View style={{ color: theme.pageTextPositive, ...style }}>
       <Select
         bare
         options={fields}
@@ -116,7 +116,7 @@ export function OpSelect({
       value={value}
       onChange={value => onChange('op', value)}
       line={line}
-      style={[{ minHeight: '1px' }, ...style]}
+      style={{ minHeight: '1px', ...style }}
       wrapperStyle={wrapperStyle}
     />
   );
@@ -399,14 +399,14 @@ function StageButton({ selected, children, style, onSelect }) {
   return (
     <Button
       type="bare"
-      style={[
-        { fontSize: 'inherit' },
-        selected && {
+      style={{
+        fontSize: 'inherit',
+        ...(selected && {
           backgroundColor: theme.pillBackgroundSelected,
           ':hover': { backgroundColor: theme.pillBackgroundSelected },
-        },
-        style,
-      ]}
+        }),
+        ...style,
+      }}
       onClick={onSelect}
     >
       {children}
@@ -765,7 +765,7 @@ export default function EditRule({
       title="Rule"
       padding={0}
       {...modalProps}
-      style={[modalProps.style, { flex: 'inherit', maxWidth: '90%' }]}
+      style={{ ...modalProps.style, flex: 'inherit', maxWidth: '90%' }}
     >
       {() => (
         <View
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.js b/packages/desktop-client/src/components/modals/ImportTransactions.js
index 699ab7db81b..7e7fce6757f 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.js
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.js
@@ -300,14 +300,14 @@ function Transaction({
         <>
           <Field
             width={90}
-            contentStyle={[{ textAlign: 'right' }, styles.tnum]}
+            contentStyle={{ textAlign: 'right', ...styles.tnum }}
             title={outflow}
           >
             {outflow}
           </Field>
           <Field
             width={90}
-            contentStyle={[{ textAlign: 'right' }, styles.tnum]}
+            contentStyle={{ textAlign: 'right', ...styles.tnum }}
             title={inflow}
           >
             {inflow}
@@ -316,7 +316,7 @@ function Transaction({
       ) : (
         <Field
           width={90}
-          contentStyle={[{ textAlign: 'right' }, styles.tnum]}
+          contentStyle={{ textAlign: 'right', ...styles.tnum }}
           title={amount}
         >
           {amount}
@@ -397,16 +397,14 @@ function DateFormatSelect({
 function CheckboxOption({ id, checked, disabled, onChange, children, style }) {
   return (
     <View
-      style={[
-        {
-          flex: 1,
-          flexDirection: 'row',
-          alignItems: 'center',
-          userSelect: 'none',
-          minHeight: 28,
-        },
-        style,
-      ]}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        userSelect: 'none',
+        minHeight: 28,
+        ...style,
+      }}
     >
       <Checkbox
         id={id}
diff --git a/packages/desktop-client/src/components/modals/ManageRulesModal.js b/packages/desktop-client/src/components/modals/ManageRulesModal.js
index fcf52c5c817..bb052aa2e99 100644
--- a/packages/desktop-client/src/components/modals/ManageRulesModal.js
+++ b/packages/desktop-client/src/components/modals/ManageRulesModal.js
@@ -22,7 +22,12 @@ export default function ManageRulesModal({ modalProps, payeeId }) {
       padding={0}
       loading={loading}
       {...modalProps}
-      style={[modalProps.style, { flex: 1, maxWidth: '90%', maxHeight: '90%' }]}
+      style={{
+        ...modalProps.style,
+        flex: 1,
+        maxWidth: '90%',
+        maxHeight: '90%',
+      }}
     >
       {() => <ManageRules isModal payeeId={payeeId} setLoading={setLoading} />}
     </Modal>
diff --git a/packages/desktop-client/src/components/payees/index.js b/packages/desktop-client/src/components/payees/index.js
index e790a809c52..8adbba2408d 100644
--- a/packages/desktop-client/src/components/payees/index.js
+++ b/packages/desktop-client/src/components/payees/index.js
@@ -107,24 +107,22 @@ let Payee = memo(
 
     return (
       <Row
-        style={[
-          { alignItems: 'stretch' },
-          style,
-          {
-            borderColor,
-            backgroundColor: hovered
-              ? colors.hover
-              : selected
-              ? colors.b9
-              : backgroundFocus
-              ? colors.hover
-              : 'white',
-          },
-          selected && {
+        style={{
+          alignItems: 'stretch',
+          ...style,
+          borderColor,
+          backgroundColor: hovered
+            ? colors.hover
+            : selected
+            ? colors.b9
+            : backgroundFocus
+            ? colors.hover
+            : 'white',
+          ...(selected && {
             backgroundColor: colors.b9,
             zIndex: 100,
-          },
-        ]}
+          }),
+        }}
         data-focus-key={payee.id}
         onMouseEnter={() => onHover && onHover(payee.id)}
       >
@@ -191,7 +189,7 @@ const PayeeTable = forwardRef(
     }, []);
 
     return (
-      <View style={[{ flex: 1 }]} onMouseLeave={() => setHovered(null)}>
+      <View style={{ flex: 1 }} onMouseLeave={() => setHovered(null)}>
         <Table
           ref={ref}
           items={payees}
@@ -254,16 +252,14 @@ function PayeeTableHeader() {
 function EmptyMessage({ text, style }) {
   return (
     <View
-      style={[
-        {
-          textAlign: 'center',
-          color: colors.n7,
-          fontStyle: 'italic',
-          fontSize: 13,
-          marginTop: 5,
-        },
+      style={{
+        textAlign: 'center',
+        color: colors.n7,
+        fontStyle: 'italic',
+        fontSize: 13,
+        marginTop: 5,
         style,
-      ]}
+      }}
     >
       {text}
     </View>
diff --git a/packages/desktop-client/src/components/reports/CashFlow.js b/packages/desktop-client/src/components/reports/CashFlow.js
index 662dc28103f..a7f2785e03f 100644
--- a/packages/desktop-client/src/components/reports/CashFlow.js
+++ b/packages/desktop-client/src/components/reports/CashFlow.js
@@ -95,7 +95,7 @@ function CashFlow() {
   const { graphData, totalExpenses, totalIncome, totalTransfers } = data;
 
   return (
-    <View style={[styles.page, { minWidth: 650, overflow: 'hidden' }]}>
+    <View style={{ ...styles.page, minWidth: 650, overflow: 'hidden' }}>
       <Header
         title="Cash Flow"
         allMonths={allMonths}
diff --git a/packages/desktop-client/src/components/reports/CategorySpending.js b/packages/desktop-client/src/components/reports/CategorySpending.js
index 0a01fa4951e..eac84d9f932 100644
--- a/packages/desktop-client/src/components/reports/CategorySpending.js
+++ b/packages/desktop-client/src/components/reports/CategorySpending.js
@@ -125,7 +125,7 @@ function CategoryAverage() {
   );
 
   return (
-    <View style={[styles.page, { overflow: 'hidden' }]}>
+    <View style={{ ...styles.page, overflow: 'hidden' }}>
       <Header
         title="Category Spending"
         allMonths={allMonths}
diff --git a/packages/desktop-client/src/components/reports/Change.js b/packages/desktop-client/src/components/reports/Change.js
index 3d491f57bcb..e64064f4d3b 100644
--- a/packages/desktop-client/src/components/reports/Change.js
+++ b/packages/desktop-client/src/components/reports/Change.js
@@ -8,7 +8,7 @@ import Block from '../common/Block';
 function Change({ amount }) {
   return (
     <Block
-      style={[styles.smallText, { color: amount < 0 ? colors.r5 : colors.g5 }]}
+      style={{ ...styles.smallText, color: amount < 0 ? colors.r5 : colors.g5 }}
     >
       {amount >= 0 ? '+' : ''}
       {integerToCurrency(amount)}
diff --git a/packages/desktop-client/src/components/reports/Container.tsx b/packages/desktop-client/src/components/reports/Container.tsx
index 772586b0549..34b9c0d7c8c 100644
--- a/packages/desktop-client/src/components/reports/Container.tsx
+++ b/packages/desktop-client/src/components/reports/Container.tsx
@@ -1,8 +1,7 @@
-import React, { type ReactNode, useRef } from 'react';
+import React, { useRef, type ReactNode } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { type CSSProperties } from 'glamor';
-
+import { type CSSProperties } from '../../style';
 import View from '../common/View';
 
 type ContainerProps = {
@@ -13,7 +12,9 @@ export default function Container({ style, children }: ContainerProps) {
   const portalHost = useRef<HTMLDivElement>(null);
 
   return (
-    <View style={[{ height: 300, position: 'relative', flexShrink: 0 }, style]}>
+    <View
+      style={{ height: 300, position: 'relative', flexShrink: 0, ...style }}
+    >
       <div ref={portalHost} />
       <AutoSizer>
         {({ width, height }) => (
diff --git a/packages/desktop-client/src/components/reports/NetWorth.js b/packages/desktop-client/src/components/reports/NetWorth.js
index 49be0724507..294e3b8c083 100644
--- a/packages/desktop-client/src/components/reports/NetWorth.js
+++ b/packages/desktop-client/src/components/reports/NetWorth.js
@@ -83,7 +83,7 @@ export default function NetWorth() {
   }
 
   return (
-    <View style={[styles.page, { minWidth: 650, overflow: 'hidden' }]}>
+    <View style={{ ...styles.page, minWidth: 650, overflow: 'hidden' }}>
       <Header
         title="Net Worth"
         allMonths={allMonths}
@@ -117,7 +117,7 @@ export default function NetWorth() {
           }}
         >
           <View
-            style={[styles.largeText, { fontWeight: 400, marginBottom: 5 }]}
+            style={{ ...styles.largeText, fontWeight: 400, marginBottom: 5 }}
           >
             <PrivacyFilter blurIntensity={5}>
               {integerToCurrency(data.netWorth)}
diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
index 04308f7d5ed..cc2fceb255c 100644
--- a/packages/desktop-client/src/components/reports/Overview.js
+++ b/packages/desktop-client/src/components/reports/Overview.js
@@ -32,20 +32,18 @@ function Card({ flex, to, style, children }) {
 
   const content = (
     <View
-      style={[
-        {
-          backgroundColor: 'white',
-          borderRadius: 2,
-          height: 200,
-          boxShadow: '0 2px 6px rgba(0, 0, 0, .15)',
-          transition: 'box-shadow .25s',
-          ':hover': to && {
-            boxShadow: '0 4px 6px rgba(0, 0, 0, .15)',
-          },
+      style={{
+        backgroundColor: 'white',
+        borderRadius: 2,
+        height: 200,
+        boxShadow: '0 2px 6px rgba(0, 0, 0, .15)',
+        transition: 'box-shadow .25s',
+        ':hover': to && {
+          boxShadow: '0 4px 6px rgba(0, 0, 0, .15)',
         },
-        to ? null : containerProps,
-        style,
-      ]}
+        ...(to ? null : containerProps),
+        ...style,
+      }}
     >
       {children}
     </View>
@@ -55,7 +53,7 @@ function Card({ flex, to, style, children }) {
     return (
       <AnchorLink
         to={to}
-        style={[{ textDecoration: 'none', flex }, containerProps]}
+        style={{ textDecoration: 'none', flex, ...containerProps }}
       >
         {content}
       </AnchorLink>
@@ -101,7 +99,7 @@ function NetWorthCard({ accounts }) {
         <View style={{ flexDirection: 'row', padding: 20 }}>
           <View style={{ flex: 1 }}>
             <Block
-              style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
+              style={{ ...styles.mediumText, fontWeight: 500, marginBottom: 5 }}
               role="heading"
             >
               Net Worth
@@ -111,10 +109,11 @@ function NetWorthCard({ accounts }) {
           {data && (
             <View style={{ textAlign: 'right' }}>
               <Block
-                style={[
-                  styles.mediumText,
-                  { fontWeight: 500, marginBottom: 5 },
-                ]}
+                style={{
+                  ...styles.mediumText,
+                  fontWeight: 500,
+                  marginBottom: 5,
+                }}
               >
                 <PrivacyFilter activationFilters={[!isCardHovered]}>
                   {integerToCurrency(data.netWorth)}
@@ -170,7 +169,7 @@ function CashFlowCard() {
         <View style={{ flexDirection: 'row', padding: 20 }}>
           <View style={{ flex: 1 }}>
             <Block
-              style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
+              style={{ ...styles.mediumText, fontWeight: 500, marginBottom: 5 }}
               role="heading"
             >
               Cash Flow
@@ -300,7 +299,7 @@ function CategorySpendingCard() {
         <View style={{ flexDirection: 'row', padding: '20px 20px 0' }}>
           <View style={{ flex: 1 }}>
             <Block
-              style={[styles.mediumText, { fontWeight: 500, marginBottom: 5 }]}
+              style={{ ...styles.mediumText, fontWeight: 500, marginBottom: 5 }}
               role="heading"
             >
               Spending
@@ -332,10 +331,10 @@ export default function Overview() {
   let accounts = useSelector(state => state.queries.accounts);
   return (
     <View
-      style={[
-        styles.page,
-        { paddingLeft: 40, paddingRight: 40, minWidth: 700 },
-      ]}
+      style={{
+        ...styles.page,
+        ...{ paddingLeft: 40, paddingRight: 40, minWidth: 700 },
+      }}
     >
       <View
         style={{
diff --git a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
index 438c2db2ade..675cbde2f85 100644
--- a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx
@@ -29,7 +29,12 @@ function CategorySpendingGraph({
   }
 
   return (
-    <Container style={[style, compact && { height: 'auto', flex: 1 }]}>
+    <Container
+      style={{
+        ...style,
+        ...(compact && { height: 'auto', flex: 1 }),
+      }}
+    >
       {(width, height, portalHost) => (
         <VictoryChart
           scale={{ x: 'time', y: 'linear' }}
diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
index f19da27d811..ff8b4687def 100644
--- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
+++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -1,7 +1,6 @@
 import React, { createElement } from 'react';
 
 import * as d from 'date-fns';
-import { type CSSProperties } from 'glamor';
 import {
   VictoryChart,
   VictoryBar,
@@ -11,6 +10,7 @@ import {
   VictoryGroup,
 } from 'victory';
 
+import { type CSSProperties } from '../../../style';
 import theme from '../chart-theme';
 import Container from '../Container';
 import Tooltip from '../Tooltip';
@@ -26,7 +26,12 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) {
   const Chart = compact ? VictoryGroup : VictoryChart;
 
   return (
-    <Container style={[style, compact && { height: 'auto' }]}>
+    <Container
+      style={{
+        ...style,
+        ...(compact && { height: 'auto' }),
+      }}
+    >
       {(width, height, portalHost) =>
         graphData && (
           <Chart
diff --git a/packages/desktop-client/src/components/rules/ActionExpression.tsx b/packages/desktop-client/src/components/rules/ActionExpression.tsx
index fe93b300e5d..0b6cc17877c 100644
--- a/packages/desktop-client/src/components/rules/ActionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ActionExpression.tsx
@@ -1,9 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 import { type ScheduleEntity } from 'loot-core/src/types/models';
 
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
 
@@ -31,20 +31,18 @@ export default function ActionExpression({
 }: ActionExpressionProps) {
   return (
     <View
-      style={[
-        {
-          display: 'block',
-          maxWidth: '100%',
-          color: theme.altPillText,
-          backgroundColor: theme.altPillBackground,
-          borderRadius: 4,
-          padding: '3px 5px',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
-        style,
-      ]}
+      style={{
+        display: 'block',
+        maxWidth: '100%',
+        color: theme.altPillText,
+        backgroundColor: theme.altPillBackground,
+        borderRadius: 4,
+        padding: '3px 5px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        ...style,
+      }}
     >
       {op === 'set' ? (
         <>
diff --git a/packages/desktop-client/src/components/rules/ConditionExpression.tsx b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
index fd0f80b3e48..c1fa94c5e27 100644
--- a/packages/desktop-client/src/components/rules/ConditionExpression.tsx
+++ b/packages/desktop-client/src/components/rules/ConditionExpression.tsx
@@ -1,8 +1,8 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 
 import { mapField, friendlyOp } from 'loot-core/src/shared/rules';
 
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
 
@@ -33,20 +33,18 @@ export default function ConditionExpression({
 }: ConditionExpressionProps) {
   return (
     <View
-      style={[
-        {
-          display: 'block',
-          maxWidth: '100%',
-          color: theme.altPillText,
-          backgroundColor: theme.altPillBackground,
-          borderRadius: 4,
-          padding: '3px 5px',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        },
-        style,
-      ]}
+      style={{
+        display: 'block',
+        maxWidth: '100%',
+        color: theme.altPillText,
+        backgroundColor: theme.altPillBackground,
+        borderRadius: 4,
+        padding: '3px 5px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        ...style,
+      }}
     >
       {prefix && <Text>{prefix} </Text>}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
diff --git a/packages/desktop-client/src/components/rules/SimpleTable.tsx b/packages/desktop-client/src/components/rules/SimpleTable.tsx
index 628955e1fb3..c5077924629 100644
--- a/packages/desktop-client/src/components/rules/SimpleTable.tsx
+++ b/packages/desktop-client/src/components/rules/SimpleTable.tsx
@@ -1,10 +1,6 @@
-import React, {
-  useEffect,
-  useRef,
-  type CSSProperties,
-  type ReactChild,
-} from 'react';
+import React, { type ReactNode, useEffect, useRef } from 'react';
 
+import { type CSSProperties } from '../../style';
 import View from '../common/View';
 
 type SimpleTableProps = {
@@ -12,7 +8,7 @@ type SimpleTableProps = {
   loadMore?: () => void;
   style?: CSSProperties;
   onHoverLeave?: () => void;
-  children: ReactChild;
+  children: ReactNode;
 };
 
 export default function SimpleTable({
@@ -44,14 +40,12 @@ export default function SimpleTable({
 
   return (
     <View
-      style={[
-        {
-          flex: 1,
-          outline: 'none',
-          '& .animated .animated-row': { transition: '.25s transform' },
-        },
-        style,
-      ]}
+      style={{
+        flex: 1,
+        outline: 'none',
+        '& .animated .animated-row': { transition: '.25s transform' },
+        ...style,
+      }}
       tabIndex={1}
       data-testid="table"
     >
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.js b/packages/desktop-client/src/components/schedules/SchedulesTable.js
index c40fc0d127a..7b66b915104 100644
--- a/packages/desktop-client/src/components/schedules/SchedulesTable.js
+++ b/packages/desktop-client/src/components/schedules/SchedulesTable.js
@@ -274,7 +274,7 @@ export function SchedulesTable({
   }
 
   return (
-    <View style={[{ flex: 1 }, tableStyle]}>
+    <View style={{ flex: 1, ...tableStyle }}>
       <TableHeader height={ROW_HEIGHT} inset={15} version="v2">
         <Field width="flex">Name</Field>
         <Field width="flex">Payee</Field>
@@ -295,7 +295,7 @@ export function SchedulesTable({
         rowHeight={ROW_HEIGHT}
         backgroundColor="transparent"
         version="v2"
-        style={[{ flex: 1, backgroundColor: 'transparent' }, style]}
+        style={{ flex: 1, backgroundColor: 'transparent', ...style }}
         items={items}
         renderItem={renderItem}
         renderEmpty={filter ? 'No matching schedules' : 'No schedules'}
diff --git a/packages/desktop-client/src/components/schedules/StatusBadge.js b/packages/desktop-client/src/components/schedules/StatusBadge.js
index c59447ddbdc..b5c62964459 100644
--- a/packages/desktop-client/src/components/schedules/StatusBadge.js
+++ b/packages/desktop-client/src/components/schedules/StatusBadge.js
@@ -71,18 +71,16 @@ export function StatusBadge({ status, style }) {
   let { color, backgroundColor, Icon } = getStatusProps(status);
   return (
     <View
-      style={[
-        {
-          color,
-          backgroundColor,
-          padding: '6px 8px',
-          borderRadius: 4,
-          flexDirection: 'row',
-          alignItems: 'center',
-          flexShrink: 0,
-        },
-        style,
-      ]}
+      style={{
+        color,
+        backgroundColor,
+        padding: '6px 8px',
+        borderRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexShrink: 0,
+        ...style,
+      }}
     >
       <Icon
         style={{
diff --git a/packages/desktop-client/src/components/select/DateSelect.js b/packages/desktop-client/src/components/select/DateSelect.js
index 8554025ac60..b47f7626485 100644
--- a/packages/desktop-client/src/components/select/DateSelect.js
+++ b/packages/desktop-client/src/components/select/DateSelect.js
@@ -141,7 +141,7 @@ let DatePicker = forwardRef(
       }
     }, [value, dateFormat]);
 
-    return <View style={[pickerStyles, { flex: 1 }]} innerRef={mountPoint} />;
+    return <View style={{ ...pickerStyles, flex: 1 }} innerRef={mountPoint} />;
   },
 );
 
@@ -293,7 +293,7 @@ export default function DateSelect({
       <Tooltip
         position="bottom-left"
         offset={2}
-        style={[{ padding: 0, minWidth: 225 }, tooltipStyle]}
+        style={{ padding: 0, minWidth: 225, ...tooltipStyle }}
         data-testid="date-select-tooltip"
       >
         {content}
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
index a98b2ebe425..330a800fb24 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.js
@@ -449,7 +449,10 @@ export default function RecurringSchedulePicker({
 
   return (
     <View>
-      <Button {...getOpenEvents()} style={[{ textAlign: 'left' }, buttonStyle]}>
+      <Button
+        {...getOpenEvents()}
+        style={{ textAlign: 'left', ...buttonStyle }}
+      >
         {value ? getRecurringDescription(value) : 'No recurring date'}
       </Button>
       {isOpen && (
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index 7c88d9ffe34..e5eb6e78b73 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -1,10 +1,9 @@
-import React, { type ReactNode, useState } from 'react';
+import React, { useState, type ReactNode } from 'react';
 import { useLocation } from 'react-router';
 
 import { css, media } from 'glamor';
-import type { CSSProperties } from 'glamor';
 
-import { colors } from '../../style';
+import { type CSSProperties, colors } from '../../style';
 import tokens from '../../tokens';
 import LinkButton from '../common/LinkButton';
 import View from '../common/View';
@@ -57,17 +56,15 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
   return expanded ? (
     <View
       id="advanced"
-      style={[
-        {
-          gap: 20,
-          alignItems: 'flex-start',
-          marginBottom: 25,
-          width: '100%',
-        },
-        media(`(min-width: ${tokens.breakpoint_small})`, {
-          width: 'auto',
-        }),
-      ]}
+      style={{
+        gap: 20,
+        alignItems: 'flex-start',
+        marginBottom: 25,
+        width: '100%',
+      }}
+      className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
+        width: 'auto',
+      })}`}
       innerRef={el => {
         if (el && location.hash === '#advanced') {
           el.scrollIntoView(true);
diff --git a/packages/desktop-client/src/components/settings/index.tsx b/packages/desktop-client/src/components/settings/index.tsx
index 5771954a503..ab6e8884a53 100644
--- a/packages/desktop-client/src/components/settings/index.tsx
+++ b/packages/desktop-client/src/components/settings/index.tsx
@@ -44,16 +44,17 @@ function About() {
         your finances.
       </Text>
       <View
-        style={[
-          { flexDirection: 'column', gap: 10 },
-          media(`(min-width: ${tokens.breakpoint_small})`, {
-            display: 'grid',
-            gridTemplateRows: '1fr 1fr',
-            gridTemplateColumns: '50% 50%',
-            columnGap: '2em',
-            gridAutoFlow: 'column',
-          }),
-        ]}
+        style={{
+          flexDirection: 'column',
+          gap: 10,
+        }}
+        className={`${media(`(min-width: ${tokens.breakpoint_small})`, {
+          display: 'grid',
+          gridTemplateRows: '1fr 1fr',
+          gridTemplateColumns: '50% 50%',
+          columnGap: '2em',
+          gridAutoFlow: 'column',
+        })}`}
         data-vrt-mask
       >
         <Text>Client version: v{window.Actual.ACTUAL_VERSION}</Text>
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
index a1ad9477a05..d4ec0e00db7 100644
--- a/packages/desktop-client/src/components/sidebar/Account.tsx
+++ b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -1,11 +1,11 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 
 import { css } from 'glamor';
 
 import { type AccountEntity } from 'loot-core/src/types/models';
 
 // eslint-disable-next-line no-restricted-imports
-import { styles, colors } from '../../style';
+import { styles, colors, type CSSProperties } from '../../style';
 import AlignedText from '../common/AlignedText';
 import AnchorLink from '../common/AnchorLink';
 import View from '../common/View';
@@ -19,7 +19,7 @@ import {
 import { type Binding } from '../spreadsheet';
 import CellValue from '../spreadsheet/CellValue';
 
-const accountNameStyle = {
+export const accountNameStyle: CSSProperties = {
   marginTop: -2,
   marginBottom: 2,
   paddingTop: 4,
@@ -81,18 +81,19 @@ function Account({
   });
 
   return (
-    <View innerRef={dropRef} style={[{ flexShrink: 0 }, outerStyle]}>
+    <View innerRef={dropRef} style={{ flexShrink: 0, ...outerStyle }}>
       <View>
         <DropHighlight pos={dropPos} />
         <View innerRef={dragRef}>
           <AnchorLink
             to={to}
-            style={[
-              accountNameStyle,
-              style,
-              { position: 'relative', borderLeft: '4px solid transparent' },
-              updated && { fontWeight: 700 },
-            ]}
+            style={{
+              ...accountNameStyle,
+              ...style,
+              position: 'relative',
+              borderLeft: '4px solid transparent',
+              ...(updated && { fontWeight: 700 }),
+            }}
             activeStyle={{
               borderColor: colors.p8,
               color: colors.p8,
@@ -144,5 +145,4 @@ function Account({
   );
 }
 
-export { accountNameStyle };
 export default Account;
diff --git a/packages/desktop-client/src/components/sidebar/Item.tsx b/packages/desktop-client/src/components/sidebar/Item.tsx
index 3e1db09108e..c3d84b1a7e3 100644
--- a/packages/desktop-client/src/components/sidebar/Item.tsx
+++ b/packages/desktop-client/src/components/sidebar/Item.tsx
@@ -1,5 +1,4 @@
 import React, {
-  type CSSProperties,
   type ComponentType,
   type MouseEventHandler,
   type ReactNode,
@@ -7,7 +6,7 @@ import React, {
 } from 'react';
 
 // eslint-disable-next-line no-restricted-imports
-import { styles, colors } from '../../style';
+import { styles, colors, type CSSProperties } from '../../style';
 import Block from '../common/Block';
 import View from '../common/View';
 
@@ -40,24 +39,6 @@ function Item({
     backgroundColor: colors.n2,
   };
 
-  const activeStyle = {
-    borderLeft: '4px solid ' + colors.p8,
-    paddingLeft: 19 + indent - 4,
-    color: colors.p8,
-  };
-
-  const linkStyle = {
-    ...styles.mediumText,
-    paddingTop: 9,
-    paddingBottom: 9,
-    paddingLeft: 19 + indent,
-    paddingRight: 10,
-    textDecoration: 'none',
-    color: colors.n9,
-    ...(forceHover ? hoverStyle : {}),
-    ':hover': hoverStyle,
-  };
-
   const content = (
     <View
       style={{
@@ -73,12 +54,26 @@ function Item({
   );
 
   return (
-    <View style={[{ flexShrink: 0 }, style]}>
+    <View style={{ flexShrink: 0, ...style }}>
       <ItemContent
-        style={linkStyle}
+        style={{
+          ...styles.mediumText,
+          paddingTop: 9,
+          paddingBottom: 9,
+          paddingLeft: 19 + indent,
+          paddingRight: 10,
+          textDecoration: 'none',
+          color: colors.n9,
+          ...(forceHover ? hoverStyle : {}),
+          ':hover': hoverStyle,
+        }}
         to={to}
         onClick={onClick}
-        activeStyle={activeStyle}
+        activeStyle={{
+          borderLeft: '4px solid ' + colors.p8,
+          paddingLeft: 19 + indent - 4,
+          color: colors.p8,
+        }}
         forceActive={forceActive}
       >
         {content}
diff --git a/packages/desktop-client/src/components/sidebar/ItemContent.tsx b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
index 98290346f19..3724a0a22e5 100644
--- a/packages/desktop-client/src/components/sidebar/ItemContent.tsx
+++ b/packages/desktop-client/src/components/sidebar/ItemContent.tsx
@@ -1,9 +1,6 @@
-import React, {
-  type CSSProperties,
-  type MouseEventHandler,
-  type ReactNode,
-} from 'react';
+import React, { type MouseEventHandler, type ReactNode } from 'react';
 
+import { type CSSProperties } from '../../style';
 import AnchorLink from '../common/AnchorLink';
 import View from '../common/View';
 
@@ -28,16 +25,14 @@ function ItemContent({
     <View
       role="button"
       tabIndex={0}
-      style={[
-        style,
-        {
-          touchAction: 'auto',
-          userSelect: 'none',
-          userDrag: 'none',
-          cursor: 'pointer',
-          ...(forceActive ? activeStyle : {}),
-        },
-      ]}
+      style={{
+        ...style,
+        touchAction: 'auto',
+        userSelect: 'none',
+        userDrag: 'none',
+        cursor: 'pointer',
+        ...(forceActive ? activeStyle : {}),
+      }}
       onClick={onClick}
     >
       {children}
diff --git a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
index f1dffffa26a..dc870f4f8db 100644
--- a/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
+++ b/packages/desktop-client/src/components/sidebar/SecondaryItem.tsx
@@ -1,12 +1,11 @@
 import React, {
-  type CSSProperties,
   type ComponentType,
   type MouseEventHandler,
   type SVGProps,
 } from 'react';
 
 // eslint-disable-next-line no-restricted-imports
-import { colors } from '../../style';
+import { type CSSProperties, colors } from '../../style';
 import Block from '../common/Block';
 import View from '../common/View';
 
@@ -34,23 +33,6 @@ function SecondaryItem({
   bold,
   indent = 0,
 }: SecondaryItemProps) {
-  const hoverStyle = {
-    backgroundColor: colors.n2,
-  };
-  const activeStyle = {
-    borderLeft: '4px solid ' + colors.p8,
-    paddingLeft: 14 - 4 + indent,
-    color: colors.p8,
-    fontWeight: bold ? fontWeight : null,
-  };
-  const linkStyle = {
-    ...accountNameStyle,
-    color: colors.n9,
-    paddingLeft: 14 + indent,
-    fontWeight: bold ? fontWeight : null,
-    ':hover': hoverStyle,
-  };
-
   const content = (
     <View
       style={{
@@ -67,12 +49,23 @@ function SecondaryItem({
   );
 
   return (
-    <View style={[{ flexShrink: 0 }, style]}>
+    <View style={{ flexShrink: 0, ...style }}>
       <ItemContent
-        style={linkStyle}
+        style={{
+          ...accountNameStyle,
+          color: colors.n9,
+          paddingLeft: 14 + indent,
+          fontWeight: bold ? fontWeight : null,
+          ':hover': { backgroundColor: colors.n2 },
+        }}
         to={to}
         onClick={onClick}
-        activeStyle={activeStyle}
+        activeStyle={{
+          borderLeft: '4px solid ' + colors.p8,
+          paddingLeft: 14 - 4 + indent,
+          color: colors.p8,
+          fontWeight: bold ? fontWeight : null,
+        }}
       >
         {content}
       </ItemContent>
diff --git a/packages/desktop-client/src/components/sidebar/Sidebar.tsx b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
index 9c9e47f1553..7b995f3a271 100644
--- a/packages/desktop-client/src/components/sidebar/Sidebar.tsx
+++ b/packages/desktop-client/src/components/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React, { type ReactNode, type CSSProperties } from 'react';
+import React, { type ReactNode } from 'react';
 
 import * as Platform from 'loot-core/src/client/platform';
 import { type AccountEntity } from 'loot-core/src/types/models';
@@ -7,7 +7,7 @@ import Reports from '../../icons/v1/Reports';
 import Wallet from '../../icons/v1/Wallet';
 import CalendarIcon from '../../icons/v2/Calendar';
 // eslint-disable-next-line no-restricted-imports
-import { colors } from '../../style';
+import { type CSSProperties, colors } from '../../style';
 import View from '../common/View';
 import { type OnDropCallback } from '../sort';
 import { type Binding } from '../spreadsheet';
@@ -68,39 +68,35 @@ function Sidebar({
 
   return (
     <View
-      style={[
-        {
-          width: SIDEBAR_WIDTH,
-          color: colors.n9,
-          backgroundColor: colors.n1,
-          '& .float': {
-            opacity: isFloating ? 1 : 0,
-            transition: 'opacity .25s, width .25s',
-            width: hasWindowButtons || isFloating ? null : 0,
-          },
-          '&:hover .float': {
-            opacity: 1,
-            width: hasWindowButtons ? null : 'auto',
-          },
+      style={{
+        width: SIDEBAR_WIDTH,
+        color: colors.n9,
+        backgroundColor: colors.n1,
+        '& .float': {
+          opacity: isFloating ? 1 : 0,
+          transition: 'opacity .25s, width .25s',
+          width: hasWindowButtons || isFloating ? null : 0,
         },
-        style,
-      ]}
+        '&:hover .float': {
+          opacity: 1,
+          width: hasWindowButtons ? null : 'auto',
+        },
+        ...style,
+      }}
     >
       <View
-        style={[
-          {
-            paddingTop: 35,
-            height: 30,
-            flexDirection: 'row',
-            alignItems: 'center',
-            margin: '0 8px 23px 20px',
-            transition: 'padding .4s',
-          },
-          hasWindowButtons && {
+        style={{
+          paddingTop: 35,
+          height: 30,
+          flexDirection: 'row',
+          alignItems: 'center',
+          margin: '0 8px 23px 20px',
+          transition: 'padding .4s',
+          ...(hasWindowButtons && {
             paddingTop: 20,
             justifyContent: 'flex-start',
-          },
-        ]}
+          }),
+        }}
       >
         {budgetName}
 
diff --git a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
index 692b853caf1..ddc1fbabef4 100644
--- a/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
+++ b/packages/desktop-client/src/components/sidebar/ToggleButton.tsx
@@ -1,8 +1,8 @@
-import React, { type CSSProperties, type MouseEventHandler } from 'react';
+import React, { type MouseEventHandler } from 'react';
 
 import Pin from '../../icons/v1/Pin';
 import ArrowButtonLeft1 from '../../icons/v2/ArrowButtonLeft1';
-import { theme } from '../../style';
+import { type CSSProperties, theme } from '../../style';
 import Button from '../common/Button';
 import View from '../common/View';
 
@@ -14,7 +14,7 @@ type ToggleButtonProps = {
 
 function ToggleButton({ style, isFloating, onFloat }: ToggleButtonProps) {
   return (
-    <View className="float" style={[style, { flexShrink: 0 }]}>
+    <View className="float" style={{ ...style, flexShrink: 0 }}>
       <Button type="bare" onClick={onFloat} color={theme.buttonMenuBorder}>
         {isFloating ? (
           <Pin
diff --git a/packages/desktop-client/src/components/sort.tsx b/packages/desktop-client/src/components/sort.tsx
index 6501de84cac..56d9feebd66 100644
--- a/packages/desktop-client/src/components/sort.tsx
+++ b/packages/desktop-client/src/components/sort.tsx
@@ -172,19 +172,17 @@ export function DropHighlight({ pos, offset }: DropHighlightProps) {
 
   return (
     <View
-      style={[
-        {
-          position: 'absolute',
-          left: 2,
-          right: 2,
-          borderRadius: 3,
-          height: 3,
-          background: theme.pageTextLink,
-          zIndex: 10000,
-          pointerEvents: 'none',
-        },
-        posStyle,
-      ]}
+      style={{
+        position: 'absolute',
+        left: 2,
+        right: 2,
+        borderRadius: 3,
+        height: 3,
+        background: theme.pageTextLink,
+        zIndex: 10000,
+        pointerEvents: 'none',
+        ...posStyle,
+      }}
     />
   );
 }
diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
index 5a667e2d11e..969003ba5a0 100644
--- a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
+++ b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -1,8 +1,6 @@
-import React, { type ReactNode, useMemo } from 'react';
+import React, { useMemo, type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
-import { styles } from '../../style';
+import { type CSSProperties, styles } from '../../style';
 import Text from '../common/Text';
 import {
   ConditionalPrivacyFilter,
@@ -50,11 +48,11 @@ function CellValue({
         }
       >
         <Text
-          style={[
-            type === 'financial' && styles.tnum,
-            style,
-            getStyle && getStyle(sheetValue),
-          ]}
+          style={{
+            ...(type === 'financial' && styles.tnum),
+            ...style,
+            ...(getStyle && getStyle(sheetValue)),
+          }}
           data-testid={testId || fullSheetName}
           data-cellname={fullSheetName}
         >
diff --git a/packages/desktop-client/src/components/table.tsx b/packages/desktop-client/src/components/table.tsx
index f9d84a59da2..504ff46393a 100644
--- a/packages/desktop-client/src/components/table.tsx
+++ b/packages/desktop-client/src/components/table.tsx
@@ -15,8 +15,6 @@ import React, {
 import { useStore } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { type CSSProperties } from 'glamor';
-
 import {
   AvoidRefocusScrollProvider,
   useProperFocus,
@@ -26,7 +24,7 @@ import AnimatedLoading from '../icons/AnimatedLoading';
 import DeleteIcon from '../icons/v0/Delete';
 import ExpandArrow from '../icons/v0/ExpandArrow';
 import Checkmark from '../icons/v1/Checkmark';
-import { styles, theme } from '../style';
+import { type CSSProperties, styles, theme } from '../style';
 
 import Button from './common/Button';
 import Input from './common/Input';
@@ -73,30 +71,26 @@ export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(
     <View
       innerRef={ref}
       {...props}
-      style={[
-        width === 'flex' ? { flex: 1, flexBasis: 0 } : { width },
-        {
-          borderTopWidth: 1,
-          borderBottomWidth: 1,
-          borderColor: theme.tableBorder,
-        },
-        styles.smallText,
-        style,
-      ]}
+      style={{
+        ...(width === 'flex' ? { flex: 1, flexBasis: 0 } : { width }),
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: theme.tableBorder,
+        ...styles.smallText,
+        ...style,
+      }}
       data-testid={name}
     >
       {/* This is wrapped so that the padding is not taken into
           account with the flex width (which aligns it with the Cell
           component) */}
       <View
-        style={[
-          {
-            flex: 1,
-            padding: '0 5px',
-            justifyContent: 'center',
-          },
-          contentStyle,
-        ]}
+        style={{
+          flex: 1,
+          padding: '0 5px',
+          justifyContent: 'center',
+          ...contentStyle,
+        }}
       >
         {truncate ? (
           <Text
@@ -137,8 +131,8 @@ export function UnexposedCellContent({
 type CellProps = Omit<ComponentProps<typeof View>, 'children' | 'value'> & {
   formatter?: (value: string, type?: unknown) => string;
   focused?: boolean;
-  textAlign?: string;
-  alignItems?: string;
+  textAlign?: CSSProperties['textAlign'];
+  alignItems?: CSSProperties['alignItems'];
   plain?: boolean;
   exposed?: boolean;
   children?: ReactNode | (() => ReactNode);
@@ -171,8 +165,9 @@ export function Cell({
 
   useProperFocus(viewRef, focused !== undefined ? focused : exposed);
 
-  const widthStyle = width === 'flex' ? { flex: 1, flexBasis: 0 } : { width };
-  const cellStyle = {
+  const widthStyle: CSSProperties =
+    width === 'flex' ? { flex: 1, flexBasis: 0 } : { width };
+  const cellStyle: CSSProperties = {
     position: 'relative',
     textAlign: textAlign || 'left',
     justifyContent: 'center',
@@ -204,16 +199,14 @@ export function Cell({
           children()
         ) : (
           <View
-            style={[
-              {
-                flexDirection: 'row',
-                flex: 1,
-                padding: '0 5px',
-                alignItems: 'center',
-              },
-              styles.smallText,
-              valueStyle,
-            ]}
+            style={{
+              flexDirection: 'row',
+              flex: 1,
+              padding: '0 5px',
+              alignItems: 'center',
+              ...styles.smallText,
+              ...valueStyle,
+            }}
             // Can't use click because we only want to expose the cell if
             // the user does a direct click, not if they also drag the
             // mouse to select something
@@ -259,7 +252,7 @@ export function Cell({
   return (
     <View
       innerRef={viewRef}
-      style={[widthStyle, cellStyle, style]}
+      style={{ ...widthStyle, ...cellStyle, ...style }}
       {...viewProps}
       data-testid={name}
     >
@@ -282,16 +275,14 @@ export function Row({
 }: RowProps) {
   return (
     <View
-      style={[
-        {
-          flexDirection: 'row',
-          height: height || ROW_HEIGHT,
-          flex: '0 0 ' + (height || ROW_HEIGHT) + 'px',
-          userSelect: 'text',
-        },
-        collapsed && { marginTop: -1 },
-        style,
-      ]}
+      style={{
+        flexDirection: 'row',
+        height: height || ROW_HEIGHT,
+        flex: '0 0 ' + (height || ROW_HEIGHT) + 'px',
+        userSelect: 'text',
+        ...(collapsed && { marginTop: -1 }),
+        ...style,
+      }}
       data-testid="row"
       {...nativeProps}
     >
@@ -353,11 +344,11 @@ function InputValue({
       onUpdate={text => setValue(text)}
       onBlur={onBlur_}
       onKeyDown={onKeyDown}
-      style={[
-        inputCellStyle,
-        props.readOnly ? readonlyInputStyle : null,
-        props.style,
-      ]}
+      style={{
+        ...inputCellStyle,
+        ...(props.readOnly ? readonlyInputStyle : null),
+        ...props.style,
+      }}
     />
   );
 }
@@ -366,7 +357,7 @@ type InputCellProps = ComponentProps<typeof Cell> & {
   inputProps: ComponentProps<typeof InputValue>;
   onUpdate: ComponentProps<typeof InputValue>['onUpdate'];
   onBlur: ComponentProps<typeof InputValue>['onBlur'];
-  textAlign?: string;
+  textAlign?: CSSProperties['textAlign'];
   error?: ReactNode;
 };
 export function InputCell({
@@ -385,7 +376,7 @@ export function InputCell({
             value={props.value}
             onUpdate={onUpdate}
             onBlur={onBlur}
-            style={[{ textAlign }, inputProps && inputProps.style]}
+            style={{ textAlign, ...(inputProps && inputProps.style) }}
             {...inputProps}
           />
           {error && (
@@ -486,7 +477,7 @@ export function DeleteCell({ onDelete, style, ...props }: DeleteCellProps) {
       {...props}
       name="delete"
       width={20}
-      style={[{ alignItems: 'center', userSelect: 'none' }, style]}
+      style={{ alignItems: 'center', userSelect: 'none', ...style }}
       onClick={e => {
         e.stopPropagation();
         onDelete?.();
@@ -498,6 +489,7 @@ export function DeleteCell({ onDelete, style, ...props }: DeleteCellProps) {
 }
 
 type CellButtonProps = {
+  children: ReactNode;
   style?: CSSProperties;
   primary?: boolean;
   bare?: boolean;
@@ -505,12 +497,12 @@ type CellButtonProps = {
   clickBehavior?: string;
   onSelect?: (e) => void;
   onEdit?: () => void;
-  children: ReactNode;
   className?: string;
 };
 export const CellButton = forwardRef<HTMLDivElement, CellButtonProps>(
   (
     {
+      children,
       style,
       primary,
       bare,
@@ -518,7 +510,6 @@ export const CellButton = forwardRef<HTMLDivElement, CellButtonProps>(
       clickBehavior,
       onSelect,
       onEdit,
-      children,
       className,
     },
     ref,
@@ -549,43 +540,41 @@ export const CellButton = forwardRef<HTMLDivElement, CellButtonProps>(
             }
           }
         }}
-        style={[
-          {
-            flexDirection: 'row',
-            alignItems: 'center',
-            cursor: 'default',
-            transition: 'box-shadow .15s',
-            backgroundColor: bare
-              ? 'transparent'
-              : disabled // always use disabled before primary since we can have a disabled primary button
-              ? theme.buttonNormalDisabledBackground
-              : primary
-              ? theme.buttonPrimaryBackground
-              : theme.buttonNormalBackground,
-            border: bare
-              ? 'none'
-              : '1px solid ' +
-                (disabled
-                  ? theme.buttonNormalDisabledBorder
-                  : primary
-                  ? theme.buttonPrimaryBorder
-                  : theme.buttonNormalBorder),
-            color: bare
-              ? 'inherit'
-              : disabled
-              ? theme.buttonNormalDisabledText
-              : primary
-              ? theme.buttonPrimaryText
-              : theme.buttonNormalText,
-            ':focus': bare
-              ? null
-              : {
-                  outline: 0,
-                  boxShadow: `1px 1px 2px ${theme.buttonNormalShadow}`,
-                },
-          },
-          style,
-        ]}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          cursor: 'default',
+          transition: 'box-shadow .15s',
+          backgroundColor: bare
+            ? 'transparent'
+            : disabled // always use disabled before primary since we can have a disabled primary button
+            ? theme.buttonNormalDisabledBackground
+            : primary
+            ? theme.buttonPrimaryBackground
+            : theme.buttonNormalBackground,
+          border: bare
+            ? 'none'
+            : '1px solid ' +
+              (disabled
+                ? theme.buttonNormalDisabledBorder
+                : primary
+                ? theme.buttonPrimaryBorder
+                : theme.buttonNormalBorder),
+          color: bare
+            ? 'inherit'
+            : disabled
+            ? theme.buttonNormalDisabledText
+            : primary
+            ? theme.buttonPrimaryText
+            : theme.buttonNormalText,
+          ':focus': bare
+            ? null
+            : {
+                outline: 0,
+                boxShadow: `1px 1px 2px ${theme.buttonNormalShadow}`,
+              },
+          ...style,
+        }}
         onFocus={() => onEdit && onEdit()}
         data-testid="cell-button"
         onClick={
@@ -626,7 +615,7 @@ export function SelectCell({
       focused={focused}
       name="select"
       width={20}
-      style={[{ alignItems: 'center', userSelect: 'none' }, style]}
+      style={{ alignItems: 'center', userSelect: 'none', ...style }}
       onClick={e => {
         e.stopPropagation();
         onSelect?.(e);
@@ -678,6 +667,7 @@ type SheetCellProps = ComponentProps<typeof Cell> & {
   valueProps: SheetCellValueProps;
   inputProps?: Omit<ComponentProps<typeof InputValue>, 'value' | 'onUpdate'>;
   onSave?: (value) => void;
+  textAlign?: CSSProperties['textAlign'];
 };
 export function SheetCell({
   valueProps,
@@ -707,7 +697,9 @@ export function SheetCell({
   return (
     <Cell
       valueStyle={
-        getValueStyle ? [valueStyle, getValueStyle(sheetValue)] : valueStyle
+        getValueStyle
+          ? { ...valueStyle, ...getValueStyle(sheetValue) }
+          : valueStyle
       }
       textAlign={textAlign}
       {...props}
@@ -832,7 +824,11 @@ export function SelectedItemsButton({ name, keyHandlers, items, onSelect }) {
   );
 }
 
-let rowStyle = { position: 'absolute', willChange: 'transform', width: '100%' };
+let rowStyle: CSSProperties = {
+  position: 'absolute',
+  willChange: 'transform',
+  width: '100%',
+};
 
 type TableHandleRef = {
   scrollTo: (id: number, alignment?: string) => void;
@@ -1021,13 +1017,11 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
       return (
         <View
           key={key}
-          style={[
-            rowStyle,
-            {
-              zIndex: editing || selected ? 101 : 'auto',
-              transform: 'translateY(var(--pos))',
-            },
-          ]}
+          style={{
+            ...rowStyle,
+            zIndex: editing || selected ? 101 : 'auto',
+            transform: 'translateY(var(--pos))',
+          }}
           // @ts-expect-error not a recognised style attribute
           nativeStyle={{ '--pos': `${style.top - 1}px` }}
           data-focus-key={item.id}
@@ -1077,14 +1071,12 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
     if (loading) {
       return (
         <View
-          style={[
-            {
-              flex: 1,
-              justifyContent: 'center',
-              alignItems: 'center',
-              backgroundColor,
-            },
-          ]}
+          style={{
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor,
+          }}
         >
           <AnimatedLoading width={25} color={theme.tableText} />
         </View>
@@ -1095,13 +1087,11 @@ export const Table = forwardRef<TableHandleRef, TableProps>(
 
     return (
       <View
-        style={[
-          {
-            flex: 1,
-            outline: 'none',
-          },
-          style,
-        ]}
+        style={{
+          flex: 1,
+          outline: 'none',
+          ...style,
+        }}
         tabIndex="1"
         {...getNavigatorProps(props)}
         data-testid="table"
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 97caeeec26b..0ec5d17d628 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -146,7 +146,7 @@ export function DateHeader({ date }) {
         justifyContent: 'center',
       }}
     >
-      <Text style={[styles.text, { fontSize: 13, color: colors.n4 }]}>
+      <Text style={{ ...styles.text, fontSize: 13, color: colors.n4 }}>
         {monthUtils.format(date, 'MMMM dd, yyyy')}
       </Text>
     </ListItem>
@@ -631,7 +631,7 @@ class TransactionEditInner extends PureComponent {
               <Button onClick={() => this.onAdd()}>
                 <SvgAdd width={17} height={17} style={{ color: colors.b3 }} />
                 <Text
-                  style={[styles.text, { color: colors.b3, marginLeft: 5 }]}
+                  style={{ ...styles.text, color: colors.b3, marginLeft: 5 }}
                 >
                   Add transaction
                 </Text>
@@ -642,7 +642,7 @@ class TransactionEditInner extends PureComponent {
                   style={{ width: 16, height: 16, color: colors.n1 }}
                 />
                 <Text
-                  style={[styles.text, { marginLeft: 6, color: colors.n1 }]}
+                  style={{ ...styles.text, marginLeft: 6, color: colors.n1 }}
                 >
                   Save changes
                 </Text>
@@ -934,13 +934,15 @@ class Transaction extends PureComponent {
         }}
       >
         <ListItem
-          style={[
-            { flex: 1, height: 60, padding: '5px 10px' }, // remove padding when Button is back
-            isPreview && { backgroundColor: colors.n11 },
-            style,
-          ]}
+          style={{
+            flex: 1,
+            height: 60,
+            padding: '5px 10px', // remove padding when Button is back
+            ...(isPreview && { backgroundColor: colors.n11 }),
+            ...style,
+          }}
         >
-          <View style={[{ flex: 1 }]}>
+          <View style={{ flex: 1 }}>
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {schedule && (
                 <ArrowsSynchronize
@@ -953,15 +955,16 @@ class Transaction extends PureComponent {
                 />
               )}
               <TextOneLine
-                style={[
-                  styles.text,
-                  textStyle,
-                  { fontSize: 14, fontWeight: added ? '600' : '400' },
-                  prettyDescription === '' && {
+                style={{
+                  ...styles.text,
+                  ...textStyle,
+                  fontSize: 14,
+                  fontWeight: added ? '600' : '400',
+                  ...(prettyDescription === '' && {
                     color: colors.n6,
                     fontStyle: 'italic',
-                  },
-                ]}
+                  }),
+                }}
               >
                 {prettyDescription || 'Empty'}
               </TextOneLine>
@@ -1002,11 +1005,13 @@ class Transaction extends PureComponent {
             )}
           </View>
           <Text
-            style={[
-              styles.text,
-              textStyle,
-              { marginLeft: 25, marginRight: 5, fontSize: 14 },
-            ]}
+            style={{
+              ...styles.text,
+              ...textStyle,
+              marginLeft: 25,
+              marginRight: 5,
+              fontSize: 14,
+            }}
           >
             {integerToCurrency(amount)}
           </Text>
@@ -1252,16 +1257,14 @@ const ROW_HEIGHT = 50;
 const ListItem = forwardRef(({ children, style, ...props }, ref) => {
   return (
     <View
-      style={[
-        {
-          height: ROW_HEIGHT,
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingLeft: 10,
-          paddingRight: 10,
-        },
-        style,
-      ]}
+      style={{
+        height: ROW_HEIGHT,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingLeft: 10,
+        paddingRight: 10,
+        ...style,
+      }}
       ref={ref}
       {...props}
     >
diff --git a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
index 82165e15888..076a682c5ed 100644
--- a/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/SimpleTransactionsTable.js
@@ -122,7 +122,7 @@ const TransactionRow = memo(function TransactionRow({
               <Field
                 key={i}
                 width={75}
-                style={[{ textAlign: 'right' }, styles.tnum]}
+                style={{ textAlign: 'right', ...styles.tnum }}
               >
                 {integerToCurrency(transaction.amount)}
               </Field>
diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
index a9557112612..f1f13868b3f 100644
--- a/packages/desktop-client/src/components/transactions/TransactionsTable.js
+++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -440,21 +440,18 @@ function StatusCell({
       plain
     >
       <CellButton
-        style={[
-          {
-            padding: 3,
-            backgroundColor: 'transparent',
-            border: '1px solid transparent',
-            borderRadius: 50,
-            ':focus': {
-              border: '1px solid ' + theme.formInputBorderSelected,
-              boxShadow: '0 1px 2px ' + theme.formInputBorderSelected,
-            },
-            cursor: isClearedField ? 'pointer' : 'default',
+        style={{
+          padding: 3,
+          backgroundColor: 'transparent',
+          border: '1px solid transparent',
+          borderRadius: 50,
+          ':focus': {
+            border: '1px solid ' + theme.formInputBorderSelected,
+            boxShadow: '0 1px 2px ' + theme.formInputBorderSelected,
           },
-
-          isChild && { visibility: 'hidden' },
-        ]}
+          cursor: isClearedField ? 'pointer' : 'default',
+          ...(isChild && { visibility: 'hidden' }),
+        }}
         onEdit={() => onEdit(id, 'cleared')}
         onSelect={onSelect}
       >
@@ -545,7 +542,10 @@ function PayeeCell({
       name="payee"
       textAlign="flex"
       value={payeeId}
-      valueStyle={[valueStyle, inherited && { color: theme.tableTextInactive }]}
+      valueStyle={{
+        ...valueStyle,
+        ...(inherited && { color: theme.tableTextInactive }),
+      }}
       exposed={focused}
       onExpose={name => !isPreview && onEdit(id, name)}
       onUpdate={async value => {
@@ -822,36 +822,32 @@ const Transaction = memo(function Transaction(props) {
 
   return (
     <Row
-      style={[
-        {
-          backgroundColor: selected
-            ? theme.tableRowBackgroundHighlight
-            : backgroundFocus
-            ? theme.tableRowBackgroundHover
-            : theme.tableBackground,
+      style={{
+        backgroundColor: selected
+          ? theme.tableRowBackgroundHighlight
+          : backgroundFocus
+          ? theme.tableRowBackgroundHover
+          : theme.tableBackground,
+        ':hover': !(backgroundFocus || selected) && {
+          backgroundColor: theme.tableRowBackgroundHover,
         },
-        {
-          ':hover': !(backgroundFocus || selected) && {
-            backgroundColor: theme.tableRowBackgroundHover,
-          },
-          '& .hover-visible': {
-            opacity: 0,
-          },
-          ':hover .hover-visible': {
-            opacity: 1,
-          },
+        '& .hover-visible': {
+          opacity: 0,
         },
-        highlighted || selected
+        ':hover .hover-visible': {
+          opacity: 1,
+        },
+        ...(highlighted || selected
           ? { color: theme.tableRowBackgroundHighlightText }
-          : { color: theme.tableText },
-        style,
-        isPreview && {
+          : { color: theme.tableText }),
+        ...style,
+        ...(isPreview && {
           color: theme.tableTextInactive,
           backgroundColor: !selected ? '#fcfcfc' : undefined,
           fontStyle: 'italic',
-        },
-        _unmatched && { opacity: 0.5 },
-      ]}
+        }),
+        ...(_unmatched && { opacity: 0.5 }),
+      }}
     >
       {isChild && (
         <Field
@@ -883,7 +879,7 @@ const Transaction = memo(function Transaction(props) {
           <DeleteCell
             onDelete={() => onDelete && onDelete(transaction.id)}
             exposed={editing}
-            style={[isChild && { borderLeftWidth: 1 }, { lineHeight: 0 }]}
+            style={{ ...(isChild && { borderLeftWidth: 1 }), lineHeight: 0 }}
           />
         ) : (
           <Cell width={20} />
@@ -901,7 +897,7 @@ const Transaction = memo(function Transaction(props) {
           }}
           onEdit={() => onEdit(id, 'select')}
           selected={selected}
-          style={[isChild && { borderLeftWidth: 1 }]}
+          style={{ ...(isChild && { borderLeftWidth: 1 }) }}
           value={
             matched && (
               <Hyperlink2 style={{ width: 13, height: 13, color: 'inherit' }} />
@@ -1222,7 +1218,11 @@ const Transaction = memo(function Transaction(props) {
         textAlign="right"
         title={debit}
         onExpose={name => !isPreview && onEdit(id, name)}
-        style={[isParent && { fontStyle: 'italic' }, styles.tnum, amountStyle]}
+        style={{
+          ...(isParent && { fontStyle: 'italic' }),
+          ...styles.tnum,
+          ...amountStyle,
+        }}
         inputProps={{
           value: debit === '' && credit === '' ? '0.00' : debit,
           onUpdate: onUpdate.bind(null, 'debit'),
@@ -1244,7 +1244,11 @@ const Transaction = memo(function Transaction(props) {
         textAlign="right"
         title={credit}
         onExpose={name => !isPreview && onEdit(id, name)}
-        style={[isParent && { fontStyle: 'italic' }, styles.tnum, amountStyle]}
+        style={{
+          ...(isParent && { fontStyle: 'italic' }),
+          ...styles.tnum,
+          ...amountStyle,
+        }}
         inputProps={{
           value: credit,
           onUpdate: onUpdate.bind(null, 'credit'),
@@ -1266,7 +1270,7 @@ const Transaction = memo(function Transaction(props) {
           valueStyle={{
             color: runningBalance < 0 ? theme.errorText : theme.noticeText,
           }}
-          style={[styles.tnum, amountStyle]}
+          style={{ ...styles.tnum, ...amountStyle }}
           width={88}
           textAlign="right"
           privacyFilter
@@ -1298,14 +1302,12 @@ function TransactionError({ error, isDeposit, onAddSplit, style }) {
       if (error.version === 1) {
         return (
           <View
-            style={[
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                padding: '0 5px',
-              },
-              style,
-            ]}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              padding: '0 5px',
+              ...style,
+            }}
             data-testid="transaction-error"
           >
             <Text>
@@ -1601,13 +1603,11 @@ function TransactionTableInner({
   return (
     <View
       innerRef={containerRef}
-      style={[
-        {
-          flex: 1,
-          cursor: 'default',
-        },
-        props.style,
-      ]}
+      style={{
+        flex: 1,
+        cursor: 'default',
+        ...props.style,
+      }}
     >
       <View>
         <TransactionHeader
@@ -1665,7 +1665,7 @@ function TransactionTableInner({
          //   the full height of the container ??? */}
 
       <View
-        style={[{ flex: 1, overflow: 'hidden' }]}
+        style={{ flex: 1, overflow: 'hidden' }}
         data-testid="transaction-table"
       >
         <Table
diff --git a/packages/desktop-client/src/components/util/GenericInput.js b/packages/desktop-client/src/components/util/GenericInput.js
index bbc7b8d3dce..be1037e0a02 100644
--- a/packages/desktop-client/src/components/util/GenericInput.js
+++ b/packages/desktop-client/src/components/util/GenericInput.js
@@ -203,5 +203,5 @@ export default function GenericInput({
       break;
   }
 
-  return <View style={[{ flex: 1 }, style]}>{content}</View>;
+  return <View style={{ flex: 1, ...style }}>{content}</View>;
 }
diff --git a/packages/desktop-client/src/components/util/LoadComponent.tsx b/packages/desktop-client/src/components/util/LoadComponent.tsx
index 982a3450d19..d8009096fa6 100644
--- a/packages/desktop-client/src/components/util/LoadComponent.tsx
+++ b/packages/desktop-client/src/components/util/LoadComponent.tsx
@@ -30,15 +30,13 @@ function LoadComponentInner<K extends string>({
   if (!Component) {
     return (
       <View
-        style={[
-          {
-            flex: 1,
-            gap: 20,
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-          styles.delayedFadeIn,
-        ]}
+        style={{
+          flex: 1,
+          gap: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+          ...styles.delayedFadeIn,
+        }}
       >
         {message && (
           <Block style={{ marginBottom: 20, fontSize: 18 }}>{message}</Block>
diff --git a/packages/desktop-client/src/style/index.ts b/packages/desktop-client/src/style/index.ts
index fb5f2ea25bb..92a78c4f1a5 100644
--- a/packages/desktop-client/src/style/index.ts
+++ b/packages/desktop-client/src/style/index.ts
@@ -1,3 +1,4 @@
 export * as colors from './colors';
 export * from './styles';
 export * from './theme';
+export * from './types';
diff --git a/packages/desktop-client/src/style/styles.ts b/packages/desktop-client/src/style/styles.ts
index 0aa951ef22b..a7b91273fdc 100644
--- a/packages/desktop-client/src/style/styles.ts
+++ b/packages/desktop-client/src/style/styles.ts
@@ -1,10 +1,11 @@
-import type { CSSProperties } from 'glamor';
 import { keyframes } from 'glamor';
 
 import * as Platform from 'loot-core/src/client/platform';
 
 import tokens from '../tokens';
 
+import { type CSSProperties } from './types';
+
 export const styles = {
   incomeHeaderHeight: 70,
   cardShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
diff --git a/packages/desktop-client/src/style/types.ts b/packages/desktop-client/src/style/types.ts
new file mode 100644
index 00000000000..d1ae529d52f
--- /dev/null
+++ b/packages/desktop-client/src/style/types.ts
@@ -0,0 +1,5 @@
+import { type CSSProperties as ReactCSSProperties } from 'react';
+
+export type CSSProperties = ReactCSSProperties & {
+  [propertyName: string]: unknown;
+};
diff --git a/packages/desktop-client/src/types/utils.d.ts b/packages/desktop-client/src/types/utils.d.ts
deleted file mode 100644
index d82664bd8e6..00000000000
--- a/packages/desktop-client/src/types/utils.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { HTMLProps } from 'react';
-
-export type HTMLPropsWithStyle<E> = Omit<HTMLProps<E>, 'style'> & {
-  // glamor CSSProperties is any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  style?: any;
-};
diff --git a/upcoming-release-notes/1542.md b/upcoming-release-notes/1542.md
new file mode 100644
index 00000000000..9e4c391c36e
--- /dev/null
+++ b/upcoming-release-notes/1542.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Remove usage of glamor CSSProperties