actionListItemName

packages/redux-devtools-inspector-monitor/src/ActionListRow.tsx

@@ -9,6 +9,8 @@ import {
   actionListFromFutureCss,
   actionListItemButtonsCss,
   actionListItemCss,
+  actionListItemNameCss,
+  actionListItemNameSkippedCss,
   actionListItemSelectedCss,
   actionListItemSelectorCss,
   actionListItemSkippedCss,
@@ -91,10 +93,10 @@ export default class ActionListRow<
         ]}
       >
         <div
-          {...styling([
+          css={[
-            'actionListItemName',
+            actionListItemNameCss,
-            isSkipped && 'actionListItemNameSkipped',
+            isSkipped && actionListItemNameSkippedCss,
-          ])}
+          ]}
         >
           {actionType}
         </div>

packages/redux-devtools-inspector-monitor/src/utils/createStylingFromTheme.ts

@@ -148,18 +148,18 @@ export const actionListItemTimeCss: Interpolation<Theme> = (theme) => ({
 
 export const actionListItemSelectorCss = css({ display: 'inline-flex' });
 
+export const actionListItemNameCss = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  lineHeight: '20px',
+});
+
+export const actionListItemNameSkippedCss = css({
+  textDecoration: 'line-through',
+  opacity: 0.3,
+});
+
 const getSheetFromColorMap = (map: ColorMap) => ({
-  actionListItemName: {
-    overflow: 'hidden',
-    'text-overflow': 'ellipsis',
-    'line-height': '20px',
-  },
-
-  actionListItemNameSkipped: {
-    'text-decoration': 'line-through',
-    opacity: 0.3,
-  },
-
   actionListHeaderSearch: {
     outline: 'none',
     border: 'none',