diff --git a/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx index cff8b4cb..d1ffa53d 100644 --- a/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx +++ b/ReactWithDotNet.WebSite/wwwroot/react-with-dotnet/react-with-dotnet.jsx @@ -2692,50 +2692,44 @@ function ProcessDynamicCssClasses(dynamicStyles) return; } - let hasChange = false; - + // remove all related css of component for (var key in dynamicStyles) { if (dynamicStyles.hasOwnProperty(key)) { const cssSelector = key; - const cssBody = dynamicStyles[key]; - let shouldInsert = true; + var componentUniqueIdentifier = GetComponentUniqueIdentifierFromCssSelector(cssSelector); - for (var i = 0; i < DynamicStyles.length; i++) + // remove all related css of component + for (let i = 0; i < DynamicStyles.length; i++) { - if (DynamicStyles[i].cssSelector === cssSelector) + if (DynamicStyles[i].componentUniqueIdentifier === componentUniqueIdentifier) { - if (DynamicStyles[i].cssBody === cssBody) - { - shouldInsert = false; - break; - } - - hasChange = true; - DynamicStyles[i].cssBody = cssBody; - break; + DynamicStyles.splice(i, 1); + i--; } } - - if (shouldInsert) - { - hasChange = true; - - DynamicStyles.push({ - cssSelector: cssSelector, - cssBody: cssBody, - componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector) - }); - } } } - if (hasChange) + // Add new records + for (var key in dynamicStyles) { - ApplyDynamicStylesToDom(); + if (dynamicStyles.hasOwnProperty(key)) + { + const cssSelector = key; + const cssBody = dynamicStyles[key]; + + DynamicStyles.push({ + cssSelector: cssSelector, + cssBody: cssBody, + componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector) + }); + } } + + ApplyDynamicStylesToDom(); } function ApplyDynamicStylesToDom() diff --git a/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx b/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx index cff8b4cb..d1ffa53d 100644 --- a/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx +++ b/ReactWithDotNet/JsClientEngine/react-with-dotnet/react-with-dotnet.jsx @@ -2692,50 +2692,44 @@ function ProcessDynamicCssClasses(dynamicStyles) return; } - let hasChange = false; - + // remove all related css of component for (var key in dynamicStyles) { if (dynamicStyles.hasOwnProperty(key)) { const cssSelector = key; - const cssBody = dynamicStyles[key]; - let shouldInsert = true; + var componentUniqueIdentifier = GetComponentUniqueIdentifierFromCssSelector(cssSelector); - for (var i = 0; i < DynamicStyles.length; i++) + // remove all related css of component + for (let i = 0; i < DynamicStyles.length; i++) { - if (DynamicStyles[i].cssSelector === cssSelector) + if (DynamicStyles[i].componentUniqueIdentifier === componentUniqueIdentifier) { - if (DynamicStyles[i].cssBody === cssBody) - { - shouldInsert = false; - break; - } - - hasChange = true; - DynamicStyles[i].cssBody = cssBody; - break; + DynamicStyles.splice(i, 1); + i--; } } - - if (shouldInsert) - { - hasChange = true; - - DynamicStyles.push({ - cssSelector: cssSelector, - cssBody: cssBody, - componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector) - }); - } } } - if (hasChange) + // Add new records + for (var key in dynamicStyles) { - ApplyDynamicStylesToDom(); + if (dynamicStyles.hasOwnProperty(key)) + { + const cssSelector = key; + const cssBody = dynamicStyles[key]; + + DynamicStyles.push({ + cssSelector: cssSelector, + cssBody: cssBody, + componentUniqueIdentifier: GetComponentUniqueIdentifierFromCssSelector(cssSelector) + }); + } } + + ApplyDynamicStylesToDom(); } function ApplyDynamicStylesToDom()