diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/themeDecorator.js b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/themeDecorator.js
index 8b7cbc70b6..407fcbac07 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/themeDecorator.js
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-demo/.storybook/themeDecorator.js
@@ -1,7 +1,6 @@
// themeDecorator.js
import React from "react"
-import { ThemeProvider } from 'emotion-theming';
-import { supersetTheme } from '@superset-ui/style';
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
const ThemeDecorator = storyFn => (
{storyFn()}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/README.md b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/README.md
index 398c67d86e..435f9dbe4a 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/README.md
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/README.md
@@ -8,8 +8,7 @@ Provides a style object containing a variety of style parameters for theming Sup
## Usage
```ts
-import { ThemeProvider } from 'emotion-theming';
-import styled, { supersetTheme } from '@superset-ui/style';
+import { styled, supersetTheme, ThemeProvider } from '@superset-ui/style';
// use emotion api as normal, but the theme uses the correct types
const MyHeader = styled.h1`
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
index b482950752..197ac68364 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/package.json
@@ -30,6 +30,7 @@
},
"dependencies": {
"@emotion/core": "^10.0.28",
- "@emotion/styled": "^10.0.27"
+ "@emotion/styled": "^10.0.27",
+ "emotion-theming": "^10.0.27"
}
}
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
index b865b37551..d076a47607 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
+++ b/superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-style/src/index.ts
@@ -16,7 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-import styled, { CreateStyled } from '@emotion/styled';
+import emotionStyled, { CreateStyled } from '@emotion/styled';
+
+export { useTheme, ThemeProvider, withTheme } from 'emotion-theming';
const defaultTheme = {
borderRadius: 4,
@@ -60,10 +62,11 @@ const defaultTheme = {
gridUnit: 4,
};
-export default styled as CreateStyled;
-
-export const supersetTheme = defaultTheme;
-
export interface SupersetThemeProps {
theme: typeof defaultTheme;
}
+
+export const styled: CreateStyled = emotionStyled;
+export const supersetTheme = defaultTheme;
+
+export default styled;
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json
index 5d337bad04..40c436b36d 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json
@@ -33,7 +33,6 @@
"@types/react": "^16.3.0",
"d3-cloud": "^1.2.5",
"d3-scale": "^3.0.1",
- "emotion-theming": "^10.0.27",
"encodable": "^0.3.3"
},
"peerDependencies": {
diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
index 04f7488822..092efc48b0 100644
--- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
+++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/src/chart/WordCloud.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import cloudLayout, { Word } from 'd3-cloud';
import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable';
-import { SupersetThemeProps } from '@superset-ui/style';
-import { withTheme } from 'emotion-theming';
+import { SupersetThemeProps, withTheme } from '@superset-ui/style';
export const ROTATION = {
flat: () => 0,