diff --git a/packages/main/__karma_snapshots__/ActionSheet.md b/packages/main/__karma_snapshots__/ActionSheet.md
index 058387eaa25..5387dea73f2 100644
--- a/packages/main/__karma_snapshots__/ActionSheet.md
+++ b/packages/main/__karma_snapshots__/ActionSheet.md
@@ -3,8 +3,8 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ActionSheet openBy={{...}} placement="Bottom">
         <Popover openBy={{...}} placementType="Bottom" style={[undefined]} slot={[undefined]} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md
index 3e325c27b95..4e0c85f785f 100644
--- a/packages/main/__karma_snapshots__/AnalyticalCard.md
+++ b/packages/main/__karma_snapshots__/AnalyticalCard.md
@@ -3,8 +3,8 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <AnalyticalCard header={{...}} width="20rem">
         <div className="AnalyticalCard--card---" style={{...}} title={[undefined]}>
diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md
index 197685b5af7..3e34ea6fc99 100644
--- a/packages/main/__karma_snapshots__/AnalyticalTable.md
+++ b/packages/main/__karma_snapshots__/AnalyticalTable.md
@@ -3,8 +3,8 @@
 #### `test Asc desc`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(AnalyticalTable) showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} defaultPageSize={10} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]}>
         <AnalyticalTable showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} defaultPageSize={10} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -656,8 +656,8 @@
 #### `pagination`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(AnalyticalTable) defaultPageSize={1} showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]}>
         <AnalyticalTable defaultPageSize={1} showPagination={true} data={{...}} title="Test" columns={{...}} alternateRowColors={false} loading={false} sortable={true} filterable={false} groupable={false} cellHeight={{...}} minRows={10} numItems={{...}} pivotBy={{...}} getTrProps={[Function: getTrProps]} innerRef={{...}} classes={{...}} theme={{...}}>
diff --git a/packages/main/__karma_snapshots__/Avatar.md b/packages/main/__karma_snapshots__/Avatar.md
index fb002849c00..5c25388d27a 100644
--- a/packages/main/__karma_snapshots__/Avatar.md
+++ b/packages/main/__karma_snapshots__/Avatar.md
@@ -3,8 +3,8 @@
 #### `Avatar - size: XL shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -17,8 +17,8 @@
 #### `Avatar - size: XL shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -31,8 +31,8 @@
 #### `Avatar - size: L shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="L" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -45,8 +45,8 @@
 #### `Avatar - size: L shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="L" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeL---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -59,8 +59,8 @@
 #### `Avatar - size: M shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="M" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeM--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -73,8 +73,8 @@
 #### `Avatar - size: M shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="M" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeM---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -87,8 +87,8 @@
 #### `Avatar - size: S shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="S" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -101,8 +101,8 @@
 #### `Avatar - size: S shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="S" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -115,8 +115,8 @@
 #### `Avatar - size: XS shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XS" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXS--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -129,8 +129,8 @@
 #### `Avatar - size: XS shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XS" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXS---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -143,8 +143,8 @@
 #### `Avatar - size: Custom shape: Circle`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="Custom" shape="Circle" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -157,8 +157,8 @@
 #### `Avatar - size: Custom shape: Square`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="Custom" shape="Square" initials={{...}} image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]} />
@@ -171,8 +171,8 @@
 #### `with Initials`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Avatar size="XL" initials="JD" shape="Circle" image={{...}} onClick={{...}} customDisplaySize="3rem" customFontSize="1.125rem">
         <span className="-avatar--- -sizeXL--- -circle---" style={{...}} onClick={[Function]} tabIndex={0} onKeyDown={[Function]} title={[undefined]} slot={[undefined]}>
diff --git a/packages/main/__karma_snapshots__/Badge.md b/packages/main/__karma_snapshots__/Badge.md
index cf110536733..f7e70dcbd36 100644
--- a/packages/main/__karma_snapshots__/Badge.md
+++ b/packages/main/__karma_snapshots__/Badge.md
@@ -3,8 +3,8 @@
 #### `Basic Test`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Badge colorScheme="1">
         <ui5-badge color-scheme="1" class="">
@@ -19,8 +19,8 @@
 #### `with Icon`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Badge icon={{...}} colorScheme="1">
         <ui5-badge color-scheme="1" class="">
diff --git a/packages/main/__karma_snapshots__/BusyIndicator.md b/packages/main/__karma_snapshots__/BusyIndicator.md
index 91f698a6d0f..182ac22a6b5 100644
--- a/packages/main/__karma_snapshots__/BusyIndicator.md
+++ b/packages/main/__karma_snapshots__/BusyIndicator.md
@@ -3,8 +3,8 @@
 #### `Basic Test`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <BusyIndicator active={true} size="Large">
         <ui5-busyindicator active={true} size="Large" class="" />
@@ -17,8 +17,8 @@
 #### `Inactive`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <BusyIndicator size="Large">
         <ui5-busyindicator size="Large" class="" />
@@ -31,8 +31,8 @@
 #### `Size Medium`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <BusyIndicator active={true} size="Medium">
         <ui5-busyindicator active={true} size="Medium" class="" />
@@ -45,8 +45,8 @@
 #### `Size Small`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <BusyIndicator active={true} size="Small">
         <ui5-busyindicator active={true} size="Small" class="" />
diff --git a/packages/main/__karma_snapshots__/Button.md b/packages/main/__karma_snapshots__/Button.md
index 5a9a5065e21..11d46352e36 100644
--- a/packages/main/__karma_snapshots__/Button.md
+++ b/packages/main/__karma_snapshots__/Button.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Button design="Default">
         <ui5-button design="Default" class="" />
diff --git a/packages/main/__karma_snapshots__/Calendar.md b/packages/main/__karma_snapshots__/Calendar.md
index 20fc78ce184..f9ff5fb3d7d 100644
--- a/packages/main/__karma_snapshots__/Calendar.md
+++ b/packages/main/__karma_snapshots__/Calendar.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Calendar>
         <ui5-calendar class="" />
diff --git a/packages/main/__karma_snapshots__/CalendarHeader.md b/packages/main/__karma_snapshots__/CalendarHeader.md
index a44cb43f22f..308baa95b16 100644
--- a/packages/main/__karma_snapshots__/CalendarHeader.md
+++ b/packages/main/__karma_snapshots__/CalendarHeader.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <CalendarHeader>
         <ui5-calendar-header class="" />
diff --git a/packages/main/__karma_snapshots__/Card.md b/packages/main/__karma_snapshots__/Card.md
index ea50fe2101c..aeb080bc92e 100644
--- a/packages/main/__karma_snapshots__/Card.md
+++ b/packages/main/__karma_snapshots__/Card.md
@@ -3,8 +3,8 @@
 #### `Basic Test (generated)`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Card>
         <ui5-card class="" />
diff --git a/packages/main/__karma_snapshots__/Carousel.md b/packages/main/__karma_snapshots__/Carousel.md
index 78282dfe2db..fecee60eb7e 100644
--- a/packages/main/__karma_snapshots__/Carousel.md
+++ b/packages/main/__karma_snapshots__/Carousel.md
@@ -3,8 +3,8 @@
 #### `Renders without crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -92,8 +92,8 @@
 #### `Should render a text indicator`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -180,8 +180,8 @@
 #### `CarouselArrowsPlacement: Content`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="Content" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -269,8 +269,8 @@
 #### `CarouselArrowsPlacement: PageIndicator`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -358,8 +358,8 @@
 #### `Page Indicator Placement: Top`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false}>
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -445,8 +445,8 @@
 ```
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={1} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false}>
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
@@ -534,8 +534,8 @@
 #### `Update activePage via prop`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
         <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md
index 6816a2dd67e..9cc34c79a85 100644
--- a/packages/main/__karma_snapshots__/FilterBar.md
+++ b/packages/main/__karma_snapshots__/FilterBar.md
@@ -3,8 +3,8 @@
 #### `Render without crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">
@@ -116,8 +116,8 @@
 #### `Hide Filter Bar`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">
@@ -238,8 +238,8 @@
 #### `Select Filter Item`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <FilterBar renderVariants={[Function: renderVariants]}>
         <div className="FilterBar--outerContainer---">
diff --git a/packages/main/__karma_snapshots__/MessageBox.md b/packages/main/__karma_snapshots__/MessageBox.md
index 93e854ba87d..c51256e7bf1 100644
--- a/packages/main/__karma_snapshots__/MessageBox.md
+++ b/packages/main/__karma_snapshots__/MessageBox.md
@@ -3,8 +3,8 @@
 #### `Confirm - OK`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Confirm" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Confirm" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -57,8 +57,8 @@
 #### `Confirm - Cancel`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Confirm" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Confirm" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -111,8 +111,8 @@
 #### `Success`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Success" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Success" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -158,8 +158,8 @@
 #### `Warning`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Warning" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Warning" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -205,8 +205,8 @@
 #### `Error`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Error" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Error" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -252,8 +252,8 @@
 #### `Information`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Information" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}}>
         <MessageBox type="Information" visible={true} onClose={[Function]} title={{...}} icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -299,8 +299,8 @@
 #### `Show`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) visible={true} onClose={[Function]} title="Custom" actions={{...}} icon={{...}} type="Confirm">
         <MessageBox visible={true} onClose={[Function]} title="Custom" actions={{...}} icon={{...}} type="Confirm" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -353,8 +353,8 @@
 #### `Success w/ custom title`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type="Success" visible={true} onClose={[Function]} title="Custom Success" icon={{...}} actions={{...}}>
         <MessageBox type="Success" visible={true} onClose={[Function]} title="Custom Success" icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -400,8 +400,8 @@
 #### `Not visible`
 
 ```
-"<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+"<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) type=\"Success\" visible={false} onClose={[Function]} title=\"Custom Success\" icon={{...}} actions={{...}}>
         <MessageBox type=\"Success\" visible={false} onClose={[Function]} title=\"Custom Success\" icon={{...}} actions={{...}} innerRef={{...}} classes={{...}} theme={{...}} />
@@ -414,8 +414,8 @@
 #### `No Title`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(MessageBox) visible={true} onClose={[Function]} title={{...}} icon={{...}} type="Confirm" actions={{...}}>
         <MessageBox visible={true} onClose={[Function]} title={{...}} icon={{...}} type="Confirm" actions={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md
index f5e26c6bd61..2d3471af2a1 100644
--- a/packages/main/__karma_snapshots__/ObjectPage.md
+++ b/packages/main/__karma_snapshots__/ObjectPage.md
@@ -3,8 +3,8 @@
 #### `With Subsections`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -333,8 +333,8 @@
 #### `Only Sections`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -497,8 +497,8 @@
 #### `IconTabBar Mode`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="IconTabBar" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -680,8 +680,8 @@
 #### `Not crashing with 1 section - Default Mode`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} mode="Default" onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -739,8 +739,8 @@
 #### `Not crashing with 1 section - IconTabBar Mode`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -792,8 +792,8 @@
 #### `Not crashing with 0 sections`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -827,8 +827,8 @@
 #### `Set selected section id`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage selectedSectionId="2" mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} noHeader={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
@@ -885,8 +885,8 @@
 #### `No Header`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <ObjectPage selectedSectionId="2" noHeader={true} title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} mode="Default" onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
         <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage--objectPage---" style={[undefined]} title={[undefined]}>
diff --git a/packages/main/__karma_snapshots__/ObjectStatus.md b/packages/main/__karma_snapshots__/ObjectStatus.md
index 59a0af8839f..a0554c286d2 100644
--- a/packages/main/__karma_snapshots__/ObjectStatus.md
+++ b/packages/main/__karma_snapshots__/ObjectStatus.md
@@ -3,8 +3,8 @@
 #### `Render without Crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Error" showDefaultIcon={true} icon={{...}}>
         <Component state="Error" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -28,8 +28,8 @@
 #### `Text Deprecation`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Error" showDefaultIcon={true} icon={{...}}>
         <Component state="Error" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -53,8 +53,8 @@
 #### `ObjectStatus: state: Error`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Error" showDefaultIcon={true} icon={{...}}>
         <Component state="Error" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -75,8 +75,8 @@
 #### `ObjectStatus: state: None`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="None" showDefaultIcon={true} icon={{...}}>
         <Component state="None" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -97,8 +97,8 @@
 #### `ObjectStatus: state: Success`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Success" showDefaultIcon={true} icon={{...}}>
         <Component state="Success" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -119,8 +119,8 @@
 #### `ObjectStatus: state: Warning`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Warning" showDefaultIcon={true} icon={{...}}>
         <Component state="Warning" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -141,8 +141,8 @@
 #### `ObjectStatus: state: Information`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(Component) state="Information" showDefaultIcon={true} icon={{...}}>
         <Component state="Information" showDefaultIcon={true} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
diff --git a/packages/main/__karma_snapshots__/ProgressIndicator.md b/packages/main/__karma_snapshots__/ProgressIndicator.md
index e8b2c44d3b2..0fb56715d91 100644
--- a/packages/main/__karma_snapshots__/ProgressIndicator.md
+++ b/packages/main/__karma_snapshots__/ProgressIndicator.md
@@ -3,8 +3,8 @@
 #### `Custom`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) displayValue="sdf" width="50%" height="50%" percentValue={40} visible={true} state="None">
         <ProgressIndicator displayValue="sdf" width="50%" height="50%" percentValue={40} visible={true} state="None" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -28,8 +28,8 @@
 #### `State`
 
 ```
-<ThemeProvider contentDensity="Cozy" withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider contentDensity="Cozy" withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) percentValue={85} state="Error" displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator percentValue={85} state="Error" displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -52,8 +52,8 @@
 #### `ProgressIndicator with state Error`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) state="Error" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Error" percentValue={0} displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -76,8 +76,8 @@
 #### `ProgressIndicator with state None`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) state="None" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="None" percentValue={0} displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -100,8 +100,8 @@
 #### `ProgressIndicator with state Success`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) state="Success" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Success" percentValue={0} displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -124,8 +124,8 @@
 #### `ProgressIndicator with state Warning`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) state="Warning" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Warning" percentValue={0} displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
@@ -148,8 +148,8 @@
 #### `ProgressIndicator with state Information`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(ProgressIndicator) state="Information" percentValue={0} displayValue="" visible={true} width="auto" height="">
         <ProgressIndicator state="Information" percentValue={0} displayValue="" visible={true} width="auto" height="" innerRef={{...}} classes={{...}} theme={{...}}>
diff --git a/packages/main/__karma_snapshots__/SegmentedButtonItem.md b/packages/main/__karma_snapshots__/SegmentedButtonItem.md
index 9479f9631bb..db11ab4e98a 100644
--- a/packages/main/__karma_snapshots__/SegmentedButtonItem.md
+++ b/packages/main/__karma_snapshots__/SegmentedButtonItem.md
@@ -3,8 +3,8 @@
 #### `Basic SegmentedButtonItem`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(SegmentedButtonItem) id={1} icon={{...}} visible={true} enabled={true} onClick={{...}} selected={false}>
         <SegmentedButtonItem id={1} icon={{...}} visible={true} enabled={true} onClick={{...}} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -26,8 +26,8 @@
 #### `Selected SegmentedButtonItem`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(SegmentedButtonItem) id={1} icon={{...}} selected={true} visible={true} enabled={true} onClick={{...}}>
         <SegmentedButtonItem id={1} icon={{...}} selected={true} visible={true} enabled={true} onClick={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -49,8 +49,8 @@
 #### `SegmentedButtonItem Icon Only`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(SegmentedButtonItem) id={1} icon={{...}} visible={true} enabled={true} onClick={{...}} selected={false}>
         <SegmentedButtonItem id={1} icon={{...}} visible={true} enabled={true} onClick={{...}} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -71,8 +71,8 @@
 #### `SegmentedButtonItem Disabled`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(SegmentedButtonItem) id={1} icon={{...}} enabled={false} onClick={[Function]} visible={true} selected={false}>
         <SegmentedButtonItem id={1} icon={{...}} enabled={false} onClick={[Function]} visible={true} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
@@ -93,8 +93,8 @@
 #### `SegmentedButtonItem onClick`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <WithStyles(SegmentedButtonItem) id={1} icon={{...}} onClick={[Function]} visible={true} enabled={true} selected={false}>
         <SegmentedButtonItem id={1} icon={{...}} onClick={[Function]} visible={true} enabled={true} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
diff --git a/packages/main/__karma_snapshots__/Text.md b/packages/main/__karma_snapshots__/Text.md
index cf089099f7f..56024688a0d 100644
--- a/packages/main/__karma_snapshots__/Text.md
+++ b/packages/main/__karma_snapshots__/Text.md
@@ -3,8 +3,8 @@
 #### `Render Basic Text`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Text renderWhitespace={false} wrapping={true} width={{...}}>
         <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
@@ -19,8 +19,8 @@
 #### `No Wrap`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Text wrapping={false} renderWhitespace={false} width={{...}}>
         <span style={{...}} className="Text--text--- Text--noWrap---" title={[undefined]} slot={[undefined]}>
@@ -35,8 +35,8 @@
 #### `Render Whitespace`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Text renderWhitespace={true} wrapping={true} width={{...}}>
         <span style={{...}} className="Text--text--- Text--renderWhitespace---" title={[undefined]} slot={[undefined]}>
diff --git a/packages/main/__karma_snapshots__/VariantManagement.md b/packages/main/__karma_snapshots__/VariantManagement.md
index b05101ffe6c..405bbf4805b 100644
--- a/packages/main/__karma_snapshots__/VariantManagement.md
+++ b/packages/main/__karma_snapshots__/VariantManagement.md
@@ -3,8 +3,8 @@
 #### `Render without crashing`
 
 ```
-<ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]}>
+<ThemeProvider withToastContainer={false} noInjectThemeProperties={false}>
+  <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
         <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx
index d093b53cb00..5b0bd525356 100644
--- a/packages/main/src/components/ThemeProvider/index.tsx
+++ b/packages/main/src/components/ThemeProvider/index.tsx
@@ -8,34 +8,52 @@ import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 import { ContentDensity } from '../../lib/ContentDensity';
 import { MessageToast } from '../../lib/MessageToast';
 import { Themes } from '../../lib/Themes';
+import { Jss } from 'jss';
 
 export interface ThemeProviderProps {
+  /*
+   * If true, the Theme Provider will also inject the root node for message toasts.
+   * Required in case you want to use them.
+   */
   withToastContainer?: boolean;
   children: ReactNode;
+  /*
+   * Allows you to inject a custom JSS instance, e.g. if you need another insertionPoint or differnent plugins.
+   * If not provided, the default instance from `react-jss` will be used.
+   */
+  jss?: Jss;
+  /*
+   * The Theme Provider injects the fiori_3 theme variables into the document head.
+   * If this prop is set to true, this step is skipped.
+   */
+  noInjectThemeProperties?: boolean;
 }
 
 const generateClassName = createGenerateClassName();
 
 const ThemeProvider: FC<ThemeProviderProps> = (props) => {
+  const { withToastContainer, children, jss, noInjectThemeProperties } = props;
   const theme = getTheme();
+
   useEffect(() => {
-    boot().then(async () => {
-      // TODO will rename to 'data-ui5-theme-properties' after next UI5 Web Components Release
-      const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
-      // only inject parameters for sap_fiori_3 and if they haven't been injected before
-      if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
-        injectThemeProperties(fiori3Theme);
-        const CSSVarsPonyfill = window['CSSVarsPonyfill'];
-        if (Device.browser.msie && CSSVarsPonyfill) {
-          setTimeout(() => {
-            CSSVarsPonyfill.resetCssVars();
-            CSSVarsPonyfill.cssVars();
-          }, 0);
+    if (!noInjectThemeProperties) {
+      boot().then(async () => {
+        // TODO will rename to 'data-ui5-theme-properties' after next UI5 Web Components Release
+        const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
+        // only inject parameters for sap_fiori_3 and if they haven't been injected before
+        if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
+          injectThemeProperties(fiori3Theme);
+          const CSSVarsPonyfill = window['CSSVarsPonyfill'];
+          if (Device.browser.msie && CSSVarsPonyfill) {
+            setTimeout(() => {
+              CSSVarsPonyfill.resetCssVars();
+              CSSVarsPonyfill.cssVars();
+            }, 0);
+          }
         }
-      }
-    });
-  }, [theme]);
-  const { withToastContainer, children } = props;
+      });
+    }
+  }, [theme, noInjectThemeProperties]);
 
   const isCompactSize = getCompactSize();
 
@@ -53,7 +71,7 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {
   }, [theme, isCompactSize, parameters]);
 
   return (
-    <JssProvider generateId={generateClassName}>
+    <JssProvider generateId={generateClassName} jss={jss}>
       <ReactJssThemeProvider theme={themeContext}>
         <Fragment>
           {children}
@@ -66,7 +84,8 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {
 
 ThemeProvider.displayName = 'ThemeProvider';
 ThemeProvider.defaultProps = {
-  withToastContainer: false
+  withToastContainer: false,
+  noInjectThemeProperties: false
 };
 
 export { ThemeProvider };