diff --git a/x-pack/plugins/data_visualizer/public/application/_index.scss b/x-pack/plugins/data_visualizer/public/application/_index.scss
index 9d38869d6d61c..ecc7a2fce1fa6 100644
--- a/x-pack/plugins/data_visualizer/public/application/_index.scss
+++ b/x-pack/plugins/data_visualizer/public/application/_index.scss
@@ -1,2 +1 @@
 @import 'common/components/index';
-@import 'file_data_visualizer/index';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/_index.scss
deleted file mode 100644
index 841415620d691..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'components/index';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/_index.scss
deleted file mode 100644
index 0477913cd0beb..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/_index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import 'edit_flyout/index';
-@import 'file_contents/index';
-@import 'import_summary/index';
-@import 'file_data_visualizer_view/index';
-@import 'results_view/index';
-@import 'about_panel/index';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_about_panel.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_about_panel.scss
deleted file mode 100644
index e4decb0d45522..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_about_panel.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.file-datavisualizer-about-panel__icon {
-  width: $euiSizeXL * 3;
-  height: $euiSizeXL * 3;
-  margin-left: $euiSizeXL;
-  margin-right: $euiSizeL;
-}
-
-.euiFlexItem.file-datavisualizer-about-panel__doc-icon {
-  margin-left: $euiSizeXL;
-  margin-right: $euiSizeXS;
-  margin-top: $euiSize;
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_index.scss
deleted file mode 100644
index e2edab76538c1..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'about_panel'
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx
index c0f56ead665b1..64f08822617f4 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/about_panel.tsx
@@ -7,6 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 import type { FC } from 'react';
 import React from 'react';
 
@@ -28,6 +30,13 @@ interface Props {
   hasPermissionToImport: boolean;
 }
 
+const aboutPanelContentStyle = css({
+  '.euiFilePicker__icon': {
+    width: euiThemeVars.euiSizeXXL,
+    height: euiThemeVars.euiSizeXXL,
+  },
+});
+
 export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImport }) => {
   return (
     <EuiPageTemplate.Section alignment="center" data-test-subj="dataVisualizerPageFileUpload">
@@ -40,6 +49,7 @@ export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImpor
           <div css={{ textAlign: 'center' }}>
             <EuiFilePicker
               id="filePicker"
+              fullWidth
               initialPromptText={i18n.translate(
                 'xpack.dataVisualizer.file.aboutPanel.selectOrDragAndDropFileDescription',
                 {
@@ -47,7 +57,7 @@ export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImpor
                 }
               )}
               onChange={(files) => onFilePickerChange(files)}
-              className="file-datavisualizer-file-picker"
+              css={aboutPanelContentStyle}
             />
           </div>
           <EuiSpacer size="l" />
@@ -59,11 +69,7 @@ export const AboutPanel: FC<Props> = ({ onFilePickerChange, hasPermissionToImpor
 
 export const LoadingPanel: FC = () => {
   return (
-    <EuiPageTemplate.Section
-      alignment="center"
-      data-test-subj="dataVisualizerPageFileLoading"
-      className="file-datavisualizer-about-panel__content"
-    >
+    <EuiPageTemplate.Section alignment="center" data-test-subj="dataVisualizerPageFileLoading">
       <EuiPageTemplate.EmptyPrompt
         title={
           <EuiTitle size="s">
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
index d15834ae11d73..cc7a66d138925 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
@@ -8,11 +8,25 @@
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FC } from 'react';
 import React from 'react';
+import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/react';
 
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 
 import { useDataVisualizerKibana } from '../../../kibana_context';
 
+const docIconStyle = css({
+  marginLeft: euiThemeVars.euiSizeL,
+  marginTop: euiThemeVars.euiSizeXS,
+});
+
+const mainIconStyle = css({
+  width: '96px',
+  height: '96px',
+  marginLeft: euiThemeVars.euiSizeXL,
+  marginRight: euiThemeVars.euiSizeL,
+});
+
 interface Props {
   hasPermissionToImport: boolean;
 }
@@ -28,7 +42,7 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
   return (
     <EuiFlexGroup gutterSize="xl" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiIcon size="xxl" type="addDataApp" className="file-datavisualizer-about-panel__icon" />
+        <EuiIcon size="xxl" type="addDataApp" css={mainIconStyle} />
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiTitle size="m">
@@ -65,8 +79,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </p>
         </EuiText>
         <EuiSpacer size="m" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -81,8 +95,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>
@@ -97,8 +111,8 @@ export const WelcomeContent: FC<Props> = ({ hasPermissionToImport }) => {
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="s" />
-        <EuiFlexGroup gutterSize="l">
-          <EuiFlexItem grow={false} className="file-datavisualizer-about-panel__doc-icon">
+        <EuiFlexGroup gutterSize="m">
+          <EuiFlexItem grow={false} css={docIconStyle}>
             <EuiIcon size="m" type="document" />
           </EuiFlexItem>
           <EuiFlexItem>
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/edit_flyout/_edit_flyout.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/edit_flyout/_edit_flyout.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/edit_flyout/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/edit_flyout/_index.scss
deleted file mode 100644
index 28489c50f19b4..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/edit_flyout/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'edit_flyout';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_contents/_file_contents.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_contents/_file_contents.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_contents/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_contents/_index.scss
deleted file mode 100644
index e69de29bb2d1d..0000000000000
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_file_data_visualizer_view.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_file_data_visualizer_view.scss
deleted file mode 100644
index fead6f42dbe56..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_file_data_visualizer_view.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.file-datavisualizer-file-picker {
-  max-width: inherit;
-
-  .euiFilePicker__prompt {
-    background-color: $euiColorEmptyShade;
-    box-shadow: none;
-
-    .euiFilePicker__icon {
-      width: $euiSizeXXL;
-      height: $euiSizeXXL;
-    }
-  }
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_index.scss
deleted file mode 100644
index 8bbc5bd609e7c..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/file_data_visualizer_view/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'file_data_visualizer_view';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_import_summary.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_import_summary.scss
deleted file mode 100644
index a2b4e36fcbe5e..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_import_summary.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.failure-list {
-  max-height: 200px;
-  overflow-y: auto;
-
-  .error-message {
-    color: $euiColorDanger;
-  }
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_index.scss
deleted file mode 100644
index 117e04733ed09..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'import_summary';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/failures.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/failures.tsx
index 0b6eb59622f06..2e29b081765cf 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/failures.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/failures.tsx
@@ -7,8 +7,10 @@
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { Component } from 'react';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { EuiAccordion, EuiPagination } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 const PAGE_SIZE = 100;
 
@@ -28,6 +30,15 @@ interface State {
   page: number;
 }
 
+const containerStyle = css({
+  maxHeight: '200px',
+  overflowY: 'auto',
+});
+
+const errorStyle = css({
+  color: euiThemeVars.euiColorDanger,
+});
+
 export class Failures extends Component<Props, State> {
   state: State = { page: 0 };
 
@@ -56,11 +67,11 @@ export class Failures extends Component<Props, State> {
         }
         paddingSize="m"
       >
-        <div className="failure-list">
+        <div css={containerStyle}>
           {this._renderPaginationControl()}
           {this.props.failedDocs.slice(startIndex, endIndex).map(({ item, reason, doc }) => (
             <div key={item}>
-              <div className="error-message">
+              <div css={errorStyle}>
                 {item}: {reason}
               </div>
               <div>{JSON.stringify(doc)}</div>
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_index.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_index.scss
deleted file mode 100644
index 31f819d4f08bd..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'results_view';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_results_view.scss b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_results_view.scss
deleted file mode 100644
index 1c5ea1dd26fd7..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/_results_view.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.results {
-  .euiDescriptionList {
-    dd, dt {
-      margin-top: 5px;
-    }
-    dd:nth-child(1), dt:nth-child(1), {
-      margin-top: 0;
-    }
-  }
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/results_view.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/results_view.tsx
index 91b8a388c4c32..0c55b838e37b8 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/results_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/results_view/results_view.tsx
@@ -84,7 +84,7 @@ export const ResultsView: FC<Props> = ({
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />
-      <div className="results">
+      <div>
         <EuiPanel data-test-subj="dataVisualizerFileFileContentPanel" hasShadow={false} hasBorder>
           <FileContents
             data={data}