diff --git a/src/state-control/climate/ha-state-control-climate-humidity.ts b/src/state-control/climate/ha-state-control-climate-humidity.ts
index 8db1290d4347..7abdbb9095ab 100644
--- a/src/state-control/climate/ha-state-control-climate-humidity.ts
+++ b/src/state-control/climate/ha-state-control-climate-humidity.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { domainStateColorProperties } from "../../common/entity/state_color";
@@ -176,8 +175,8 @@ export class HaStateControlClimateHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetHumidity &&
@@ -186,7 +185,7 @@ export class HaStateControlClimateHumidity extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
@@ -214,7 +213,7 @@ export class HaStateControlClimateHumidity extends LitElement {
     }
 
     return html`
-      <div class="container${classMap(containerSizeClass)}">
+      <div class="container${containerSizeClass}">
         <ha-control-circular-slider
           .current=${this.stateObj.attributes.current_humidity}
           .min=${this._min}
diff --git a/src/state-control/climate/ha-state-control-climate-temperature.ts b/src/state-control/climate/ha-state-control-climate-temperature.ts
index 2c2638e91c28..7f9d8a6855bc 100644
--- a/src/state-control/climate/ha-state-control-climate-temperature.ts
+++ b/src/state-control/climate/ha-state-control-climate-temperature.ts
@@ -291,8 +291,8 @@ export class HaStateControlClimateTemperature extends LitElement {
     }
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -311,7 +311,7 @@ export class HaStateControlClimateTemperature extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
@@ -349,7 +349,7 @@ export class HaStateControlClimateTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--low-color": lowColor,
             "--high-color": highColor,
diff --git a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
index 1caf6611c1d0..391f41ecc1d6 100644
--- a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
+++ b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus, mdiWaterPercent } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { stateActive } from "../../common/entity/state_active";
 import { stateColorCss } from "../../common/entity/state_color";
@@ -185,8 +184,8 @@ export class HaStateControlHumidifierHumidity extends LitElement {
     const currentHumidity = this.stateObj.attributes.current_humidity;
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (targetHumidity != null && this.stateObj.state !== UNAVAILABLE) {
       const inverted =
@@ -195,7 +194,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
             "--action-color": actionColor,
@@ -226,7 +225,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--action-color": actionColor,
         })}
diff --git a/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts b/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
index 18d52c0f4bc1..60b0579a6ad2 100644
--- a/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
+++ b/src/state-control/water_heater/ha-state-control-water_heater-temperature.ts
@@ -1,7 +1,6 @@
 import { mdiMinus, mdiPlus } from "@mdi/js";
 import { CSSResultGroup, LitElement, PropertyValues, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { UNIT_F } from "../../common/const";
 import { stateActive } from "../../common/entity/state_active";
@@ -181,8 +180,8 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     const active = stateActive(this.stateObj);
 
     const containerSizeClass = this._sizeController.value
-      ? { [this._sizeController.value]: true }
-      : {};
+      ? ` ${this._sizeController.value}`
+      : "";
 
     if (
       supportsTargetTemperature &&
@@ -191,7 +190,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
     ) {
       return html`
         <div
-          class="container${classMap(containerSizeClass)}"
+          class="container${containerSizeClass}"
           style=${styleMap({
             "--state-color": stateColor,
           })}
@@ -221,7 +220,7 @@ export class HaStateControlWaterHeaterTemperature extends LitElement {
 
     return html`
       <div
-        class="container${classMap(containerSizeClass)}"
+        class="container${containerSizeClass}"
         style=${styleMap({
           "--state-color": stateColor,
         })}