recalc the memo when the class changes to fix error on changing theme

README.md

@@ -229,6 +229,9 @@ E.g., if it was used in a menu and the menu is red, the circle would be red.
     ### **WORK IN PROGRESS**
 -->
 ## Changelog
+### **WORK IN PROGRESS**
+* (foxriver76) fixed bug that no labels are shown for background
+
 ### 2.9.6 (2023-12-14)
 * (foxriver76) fixed issues with the BulkEditor
 * (foxriver76) scripts in HTML are now added to the DOM, instead of being executed in eval

src/src/Attributes/View.jsx

@@ -165,17 +165,6 @@ const resolution = [
     { value: '1920x1080', label: 'Full HD - Landscape' },
 ];
 
-/**
- *
- * @param item
- * @param backgroundClass
- * @return {JSX.Element}
- */
-const renderPreview = (item, backgroundClass) => <>
-    <span className={`${backgroundClass} ${item.value}`} />
-    {I18n.t(item.label)}
-</>;
-
 const checkFunction = (funcText, settings) => {
     try {
         let _func;
@@ -226,8 +215,6 @@ const View = props => {
         return null;
     }
 
-    console.log(props.classes.backgroundClass);
-
     const [triggerAllOpened, setTriggerAllOpened] = useState(0);
     const [triggerAllClosed, setTriggerAllClosed] = useState(0);
     const [showAllViewDialog, setShowAllViewDialog] = useState(null);
@@ -342,7 +329,11 @@ const View = props => {
                     type: 'select',
                     options: background,
                     field: 'background_class',
-                    itemModify: item => renderPreview(item, props.classes.backgroundClassSquare),
+                    // eslint-disable-next-line react/no-unstable-nested-components
+                    itemModify: item => <>
+                        <span className={`${props.classes.backgroundClass} ${item.value}`} />
+                        {I18n.t(item.label)}
+                    </>,
                     renderValue: value => <div className={props.classes.backgroundClass}>
                         <span className={`${props.classes.backgroundClassSquare} ${value}`} />
                         {I18n.t(background.find(item => item.value === value).label)}
@@ -745,7 +736,7 @@ const View = props => {
                 },
             ],
         },
-    ]), [resolutionSelect, `${view.settings.sizex}x${view.settings.sizey}`]);
+    ]), [resolutionSelect, `${view.settings.sizex}x${view.settings.sizey}`, props.classes.backgroundClass, props.classes.backgroundClassSquare]);
 
     const [accordionOpen, setAccordionOpen] = useState(
         window.localStorage.getItem('attributesView')