diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 60967358d11..8256fdeda7a 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -1418,7 +1418,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox emotion-euiCheckbox"
           >
             <input
               aria-label="Select all rows"
@@ -1460,7 +1460,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select all rows"
@@ -1510,7 +1510,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
@@ -1555,7 +1555,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
@@ -1600,7 +1600,7 @@ exports[`EuiBasicTable with initial selection 1`] = `
               class="euiTableCellContent"
             >
               <div
-                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
               >
                 <input
                   aria-label="Select this row"
diff --git a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
index 5a1b635e74f..380025be112 100644
--- a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
+++ b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiCheckableCard renders a checkbox when specified 1`] = `
     class="euiPanel euiPanel--subdued euiPanel--paddingMedium euiSplitPanel__inner emotion-euiPanel-none-m-subdued-isClickable"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel"
+      class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
     >
       <input
         aria-label="aria-label"
diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index f37f6eddd43..118b0dab81f 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   class="euiFlexItem"
                 >
                   <div
-                    class="euiSwitch euiSwitch--compressed euiSwitch--mini"
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
                   >
                     <button
                       aria-checked="true"
@@ -174,7 +174,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
                   class="euiFlexItem"
                 >
                   <div
-                    class="euiSwitch euiSwitch--compressed euiSwitch--mini"
+                    class="euiSwitch euiSwitch--compressed euiSwitch--mini emotion-euiSwitch"
                   >
                     <button
                       aria-checked="true"
diff --git a/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap b/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
index 23677fab670..7fdb5b8be70 100644
--- a/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
+++ b/src/components/form/checkbox/__snapshots__/checkbox.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiCheckbox is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel testClass1 testClass2"
+  class="euiCheckbox euiCheckbox--noLabel testClass1 testClass2 emotion-euiCheckbox"
 >
   <input
     aria-label="aria-label"
@@ -19,7 +19,7 @@ exports[`EuiCheckbox is rendered 1`] = `
 
 exports[`EuiCheckbox props check is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     checked=""
@@ -35,7 +35,7 @@ exports[`EuiCheckbox props check is rendered 1`] = `
 
 exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -51,7 +51,7 @@ exports[`EuiCheckbox props disabled disabled is rendered 1`] = `
 
 exports[`EuiCheckbox props label is rendered 1`] = `
 <div
-  class="euiCheckbox"
+  class="euiCheckbox emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -74,7 +74,7 @@ exports[`EuiCheckbox props label is rendered 1`] = `
 
 exports[`EuiCheckbox props labelProps is rendered 1`] = `
 <div
-  class="euiCheckbox"
+  class="euiCheckbox emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
@@ -97,7 +97,7 @@ exports[`EuiCheckbox props labelProps is rendered 1`] = `
 
 exports[`EuiCheckbox props type inList is rendered 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
 >
   <input
     class="euiCheckbox__input"
diff --git a/src/components/form/checkbox/checkbox.test.tsx b/src/components/form/checkbox/checkbox.test.tsx
index fd02f731ed8..22ca34f5db5 100644
--- a/src/components/form/checkbox/checkbox.test.tsx
+++ b/src/components/form/checkbox/checkbox.test.tsx
@@ -13,6 +13,7 @@ import {
   startThrowingReactWarnings,
   stopThrowingReactWarnings,
 } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiCheckbox, TYPES } from './checkbox';
 
@@ -25,6 +26,15 @@ const checkboxRequiredProps = {
 };
 
 describe('EuiCheckbox', () => {
+  shouldRenderCustomStyles(
+    <EuiCheckbox {...checkboxRequiredProps} />,
+    { skipStyles: true } // styles get applied to the nested input, not to the className wrapper
+  );
+  shouldRenderCustomStyles(
+    <EuiCheckbox {...checkboxRequiredProps} label="test" />,
+    { childProps: ['labelProps'], skipParentTest: true }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiCheckbox id="id" onChange={() => {}} {...requiredProps} />
diff --git a/src/components/form/checkbox/checkbox.tsx b/src/components/form/checkbox/checkbox.tsx
index 8ef768b4895..b678e749a0d 100644
--- a/src/components/form/checkbox/checkbox.tsx
+++ b/src/components/form/checkbox/checkbox.tsx
@@ -13,6 +13,7 @@ import React, {
   InputHTMLAttributes,
   LabelHTMLAttributes,
 } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { keysOf, CommonProps } from '../../common';
@@ -67,6 +68,7 @@ export class EuiCheckbox extends Component<EuiCheckboxProps> {
   render() {
     const {
       className,
+      css: customCss,
       id,
       checked,
       label,
@@ -103,8 +105,11 @@ export class EuiCheckbox extends Component<EuiCheckboxProps> {
       );
     }
 
+    const styles = { euiCheckbox: css`` }; // TODO: Emotion conversion
+    const cssStyles = [styles.euiCheckbox, customCss];
+
     return (
-      <div className={classes}>
+      <div css={cssStyles} className={classes}>
         <input
           className="euiCheckbox__input"
           type="checkbox"
diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index 2589c2a13ed..62be3a9f356 100644
--- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
+++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -24,7 +24,7 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
 
 exports[`EuiDualRange allows value prop to accept numbers 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -54,7 +54,7 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
 
 exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     class="euiFormControlLayout"
@@ -129,7 +129,7 @@ exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
 
 exports[`EuiDualRange is rendered 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange testClass1 testClass2"
+  class="euiRangeWrapper euiDualRange testClass1 testClass2 emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -162,7 +162,7 @@ exports[`EuiDualRange is rendered 1`] = `
 
 exports[`EuiDualRange props compressed should render 1`] = `
 <div
-  class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange"
+  class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -192,7 +192,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
 
 exports[`EuiDualRange props custom ticks should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -251,7 +251,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
 
 exports[`EuiDualRange props disabled should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -282,7 +282,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
 
 exports[`EuiDualRange props fullWidth should render 1`] = `
 <div
-  class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange"
+  class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -312,7 +312,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
 
 exports[`EuiDualRange props inputs should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange testClass1 testClass2"
+  class="euiRangeWrapper euiDualRange testClass1 testClass2 emotion-euiDualRange"
 >
   <div
     class="euiFormControlLayout"
@@ -389,7 +389,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
 
 exports[`EuiDualRange props isDraggable should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -419,7 +419,7 @@ exports[`EuiDualRange props isDraggable should render 1`] = `
 
 exports[`EuiDualRange props labels should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <label
     class="euiRangeLabel euiRangeLabel--min"
@@ -459,7 +459,7 @@ exports[`EuiDualRange props labels should render 1`] = `
 
 exports[`EuiDualRange props levels should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -556,7 +556,7 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo
 
 exports[`EuiDualRange props range should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
@@ -632,7 +632,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
 
 exports[`EuiDualRange props ticks should render 1`] = `
 <div
-  class="euiRangeWrapper euiDualRange"
+  class="euiRangeWrapper euiDualRange emotion-euiDualRange"
 >
   <div
     aria-hidden="false"
diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
index 2c2b6a1d40b..44f365b18f3 100644
--- a/src/components/form/range/dual_range.test.tsx
+++ b/src/components/form/range/dual_range.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiDualRange } from './dual_range';
 
@@ -17,6 +18,15 @@ const props = {
 };
 
 describe('EuiDualRange', () => {
+  shouldRenderCustomStyles(
+    <EuiDualRange {...props} value={['1', '8']} />,
+    { skipStyles: true } // styles get applied to the underlying slider instead of the className wrapper
+  );
+  shouldRenderCustomStyles(
+    <EuiDualRange {...props} value={['1', '8']} showInput />,
+    { childProps: ['minInputProps', 'maxInputProps'], skipParentTest: true }
+  );
+
   test('is rendered', () => {
     const component = render(
       <EuiDualRange
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 66b0b5ed001..93b7a6fac7f 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { keys } from '../../../services';
@@ -501,6 +502,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
   render() {
     const {
       className,
+      css: customCss,
       compressed,
       disabled,
       fullWidth,
@@ -613,8 +615,13 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
           this.state.rangeWidth
         )
       : { left: '0' };
+
+    const styles = { euiDualRange: css`` }; // TODO: Emotion conversion
+    const cssStyles = [styles.euiDualRange, customCss];
+
     const theRange = (
       <EuiRangeWrapper
+        css={cssStyles}
         className={classes}
         fullWidth={fullWidth}
         compressed={compressed}
diff --git a/src/components/form/switch/__snapshots__/switch.test.tsx.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
index a2b9d20b2f8..c88893700b5 100644
--- a/src/components/form/switch/__snapshots__/switch.test.tsx.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
 <div
-  class="euiSwitch"
+  class="euiSwitch emotion-euiSwitch"
 >
   <button
     aria-checked="false"
@@ -43,7 +43,7 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
 
 exports[`EuiSwitch is rendered 1`] = `
 <div
-  class="euiSwitch testClass1 testClass2"
+  class="euiSwitch testClass1 testClass2 emotion-euiSwitch"
 >
   <button
     aria-checked="false"
@@ -86,7 +86,7 @@ exports[`EuiSwitch is rendered 1`] = `
 
 exports[`EuiSwitch labelProps is rendered 1`] = `
 <div
-  class="euiSwitch"
+  class="euiSwitch emotion-euiSwitch"
 >
   <button
     aria-checked="false"
diff --git a/src/components/form/switch/switch.test.tsx b/src/components/form/switch/switch.test.tsx
index 7504b981043..bc37104a38d 100644
--- a/src/components/form/switch/switch.test.tsx
+++ b/src/components/form/switch/switch.test.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiSwitch } from './switch';
 
@@ -19,6 +20,14 @@ const props = {
 };
 
 describe('EuiSwitch', () => {
+  shouldRenderCustomStyles(<EuiSwitch {...props} />, {
+    skipStyles: true, // styles are applied to the nested button instead of the className wrapper
+  });
+  shouldRenderCustomStyles(<EuiSwitch {...props} />, {
+    childProps: ['labelProps'],
+    skipParentTest: true,
+  });
+
   test('is rendered', () => {
     const component = render(
       <EuiSwitch id="test" {...props} {...requiredProps} />
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index 71fa2a0f056..063993bccf3 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -13,6 +13,7 @@ import React, {
   ReactNode,
   useCallback,
 } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
@@ -59,6 +60,7 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   compressed,
   onChange,
   className,
+  css: customCss,
   showLabel = true,
   type = 'button',
   labelProps,
@@ -94,8 +96,11 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
     );
   }
 
+  const styles = { euiSwitch: css`` }; // TODO: Emotion conversion
+  const cssStyles = [styles.euiSwitch, customCss];
+
   return (
-    <div className={classes}>
+    <div css={cssStyles} className={classes}>
       <button
         id={switchId}
         aria-checked={checked || false}
diff --git a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
index 4409b8dc5d7..ec663cd9cf6 100644
--- a/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
+++ b/src/components/key_pad_menu/__snapshots__/key_pad_menu_item.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiKeyPadMenuItem checkable renders as checkbox 1`] = `
     class="euiKeyPadMenuItem__inner"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput"
+      class="euiCheckbox euiCheckbox--noLabel euiKeyPadMenuItem__checkableInput emotion-euiCheckbox"
     >
       <input
         class="euiCheckbox__input"