diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.scss b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.scss
deleted file mode 100644
index ef998626f6127..0000000000000
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.lnsDynamicColoringRow {
-  align-items: center;
-}
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.tsx
index 90c644555d6f6..2600193b931c8 100644
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor.tsx
@@ -28,8 +28,6 @@ import {
   findMinMaxByColumnId,
   shouldColorByTerms,
 } from '../../../shared_components';
-
-import './dimension_editor.scss';
 import { CollapseSetting } from '../../../shared_components/collapse_setting';
 import { ColorMappingByValues } from '../../../shared_components/coloring/color_mapping_by_values';
 import { ColorMappingByTerms } from '../../../shared_components/coloring/color_mapping_by_terms';
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor_addtional_section.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor_addtional_section.tsx
index 93c14230f63d9..e51f866197a6b 100644
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor_addtional_section.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/datatable/components/dimension_editor_addtional_section.tsx
@@ -24,8 +24,6 @@ import {
 import { isNumericFieldForDatatable } from '../../../../common/expressions/datatable/utils';
 import { DatatableInspectorTables } from '../../../../common/expressions/datatable/datatable_fn';
 
-import './dimension_editor.scss';
-
 type ColumnType = DatatableVisualizationState['columns'][number];
 type SummaryRowType = Extract<ColumnState['summaryRow'], string>;
 
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.scss b/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.scss
deleted file mode 100644
index d7664b9d2da16..0000000000000
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.lnsDynamicColoringRow {
-  align-items: center;
-}
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.tsx
index 8c1d3bd96f2d3..c658e3089fe5d 100644
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/gauge/dimension_editor.tsx
@@ -17,6 +17,7 @@ import {
 import { GaugeTicksPositions, GaugeColorModes } from '@kbn/expression-gauge-plugin/common';
 import { getMaxValue, getMinValue } from '@kbn/expression-gauge-plugin/public';
 import { TooltipWrapper } from '@kbn/visualization-utils';
+import { css } from '@emotion/react';
 import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
 import { PalettePanelContainer } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
@@ -24,8 +25,6 @@ import type { GaugeVisualizationState } from './constants';
 import { defaultPaletteParams } from './palette_config';
 import { getAccessorsFromState } from './utils';
 
-import './dimension_editor.scss';
-
 export function GaugeDimensionEditor(
   props: VisualizationDimensionEditorProps<GaugeVisualizationState> & {
     paletteService: PaletteRegistry;
@@ -74,7 +73,9 @@ export function GaugeDimensionEditor(
         label={i18n.translate('xpack.lens.gauge.dynamicColoring.label', {
           defaultMessage: 'Band colors',
         })}
-        className="lnsDynamicColoringRow"
+        css={css`
+          align-items: center;
+        `}
       >
         <EuiSwitch
           data-test-subj="lnsDynamicColoringGaugeSwitch"
@@ -111,12 +112,14 @@ export function GaugeDimensionEditor(
       {hasDynamicColoring && (
         <>
           <EuiFormRow
-            className="lnsDynamicColoringRow"
             display="columnCompressed"
             fullWidth
             label={i18n.translate('xpack.lens.paletteMetricGradient.label', {
               defaultMessage: 'Color mapping',
             })}
+            css={css`
+              align-items: center;
+            `}
           >
             <PalettePanelContainer
               palette={displayStops.map(({ color }) => color)}
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.scss b/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.scss
deleted file mode 100644
index d7664b9d2da16..0000000000000
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.lnsDynamicColoringRow {
-  align-items: center;
-}
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.tsx
index 2c9f5dab9b889..98bf447179aea 100644
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/heatmap/dimension_editor.tsx
@@ -9,9 +9,9 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow } from '@elastic/eui';
 import { CustomizablePalette, PaletteRegistry } from '@kbn/coloring';
+import { css } from '@emotion/react';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { PalettePanelContainer } from '../../shared_components';
-import './dimension_editor.scss';
 import type { HeatmapVisualizationState } from './types';
 import { getSafePaletteParams } from './utils';
 
@@ -37,12 +37,14 @@ export function HeatmapDimensionEditor(
   return (
     <>
       <EuiFormRow
-        className="lnsDynamicColoringRow"
         display="columnCompressed"
         fullWidth
         label={i18n.translate('xpack.lens.paletteHeatmapGradient.label', {
           defaultMessage: 'Color',
         })}
+        css={css`
+          align-items: center;
+        `}
       >
         <PalettePanelContainer
           palette={displayStops.map(({ color }) => color)}
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.scss b/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.scss
deleted file mode 100644
index d7664b9d2da16..0000000000000
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.lnsDynamicColoringRow {
-  align-items: center;
-}
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.tsx
index 552b5f0a52a3f..e3f5c5cea35ce 100644
--- a/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.tsx
+++ b/x-pack/platform/plugins/shared/lens/public/visualizations/legacy_metric/dimension_editor.tsx
@@ -14,14 +14,13 @@ import {
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { ColorMode } from '@kbn/charts-plugin/common';
+import { css } from '@emotion/react';
 import type { LegacyMetricState } from '../../../common/types';
 import { isNumericFieldForDatatable } from '../../../common/expressions/datatable/utils';
 import { PalettePanelContainer } from '../../shared_components';
 import type { VisualizationDimensionEditorProps } from '../../types';
 import { defaultPaletteParams } from './palette_config';
 
-import './dimension_editor.scss';
-
 const idPrefix = htmlIdGenerator()();
 
 export function MetricDimensionEditor(
@@ -134,12 +133,14 @@ export function MetricDimensionEditor(
       </EuiFormRow>
       {hasDynamicColoring && (
         <EuiFormRow
-          className="lnsDynamicColoringRow"
           display="columnCompressed"
           fullWidth
           label={i18n.translate('xpack.lens.paletteMetricGradient.label', {
             defaultMessage: 'Color mapping',
           })}
+          css={css`
+            align-items: center;
+          `}
         >
           <PalettePanelContainer
             palette={stops.map(({ color }) => color)}