diff --git a/packages/main/__karma_snapshots__/AnalyticalCard.md b/packages/main/__karma_snapshots__/AnalyticalCard.md
index 9fd1eab39e5..d4716f9b2e4 100644
--- a/packages/main/__karma_snapshots__/AnalyticalCard.md
+++ b/packages/main/__karma_snapshots__/AnalyticalCard.md
@@ -43,13 +43,11 @@
                             </ui5-label>
                           </Label>
                           <div>
-                            <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                              <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                                <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                                  Target
-                                </span>
-                              </Component>
-                            </WithStyles(Component)>
+                            <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                                Target
+                              </span>
+                            </Text>
                           </div>
                         </div>
                         <div className="AnalyticalCardHeader-deviation---">
@@ -59,13 +57,11 @@
                             </ui5-label>
                           </Label>
                           <div>
-                            <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                              <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                                <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                                  Deviation
-                                </span>
-                              </Component>
-                            </WithStyles(Component)>
+                            <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                              <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                                Deviation
+                              </span>
+                            </Text>
                           </div>
                         </div>
                       </div>
@@ -78,13 +74,11 @@
               </AnalyticalCardHeader>
             </WithStyles(AnalyticalCardHeader)>
             <div style={{...}}>
-              <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                    I&#39;m a content!
-                  </span>
-                </Component>
-              </WithStyles(Component)>
+              <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                  I&#39;m a content!
+                </span>
+              </Text>
             </div>
           </div>
         </AnalyticalCard>
diff --git a/packages/main/__karma_snapshots__/CustomListItem.md b/packages/main/__karma_snapshots__/CustomListItem.md
index 8365cb62eb1..7cca1ab1b94 100644
--- a/packages/main/__karma_snapshots__/CustomListItem.md
+++ b/packages/main/__karma_snapshots__/CustomListItem.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <CustomListItem type="Active">
         <ui5-li-custom type="Active" class="" />
diff --git a/packages/main/__karma_snapshots__/DatePicker.md b/packages/main/__karma_snapshots__/DatePicker.md
index a971fbd5ab8..e566f8cc709 100644
--- a/packages/main/__karma_snapshots__/DatePicker.md
+++ b/packages/main/__karma_snapshots__/DatePicker.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <DatePicker valueState="None">
         <ui5-datepicker value-state="None" class="" />
diff --git a/packages/main/__karma_snapshots__/Dialog.md b/packages/main/__karma_snapshots__/Dialog.md
index dc1201418ae..3a6f05d1e2d 100644
--- a/packages/main/__karma_snapshots__/Dialog.md
+++ b/packages/main/__karma_snapshots__/Dialog.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Dialog initialFocus={{...}} headerText="">
         <WithWebComponent(Dialog) initialFocus={{...}} headerText="">
diff --git a/packages/main/__karma_snapshots__/Icon.md b/packages/main/__karma_snapshots__/Icon.md
index c94ce91fd96..b4222a5e727 100644
--- a/packages/main/__karma_snapshots__/Icon.md
+++ b/packages/main/__karma_snapshots__/Icon.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Icon>
         <ui5-icon class="" />
diff --git a/packages/main/__karma_snapshots__/Label.md b/packages/main/__karma_snapshots__/Label.md
index 5c71689b723..f85884c3359 100644
--- a/packages/main/__karma_snapshots__/Label.md
+++ b/packages/main/__karma_snapshots__/Label.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Label for="">
         <ui5-label for="" class="" />
diff --git a/packages/main/__karma_snapshots__/List.md b/packages/main/__karma_snapshots__/List.md
index 4bcf75184e5..5b9777363cd 100644
--- a/packages/main/__karma_snapshots__/List.md
+++ b/packages/main/__karma_snapshots__/List.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <WithWebComponent(List) headerText="" footerText="" mode="None" noDataText="" separators="All">
         <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="" />
diff --git a/packages/main/__karma_snapshots__/MessageBox.md b/packages/main/__karma_snapshots__/MessageBox.md
index d524b705100..93e854ba87d 100644
--- a/packages/main/__karma_snapshots__/MessageBox.md
+++ b/packages/main/__karma_snapshots__/MessageBox.md
@@ -23,13 +23,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Confirm - OK
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Confirm - OK
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -79,13 +77,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Confirm - Cancel
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Confirm - Cancel
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -135,13 +131,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Success
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Success
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -184,13 +178,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Warning
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Warning
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -233,13 +225,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Error
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Error
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="Close">
@@ -282,13 +272,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Information
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Information
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -331,13 +319,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Custom
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Custom
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="Yes">
@@ -387,13 +373,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      Custom Success
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    Custom Success
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
@@ -450,13 +434,11 @@
                 </Title>
               </header>
               <section className="MessageBox-content---">
-                <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                  <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                    <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                      No Title
-                    </span>
-                  </Component>
-                </WithStyles(Component)>
+                <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                  <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                    No Title
+                  </span>
+                </Text>
               </section>
               <footer className="MessageBox-footer---">
                 <MessageBoxButton emphasize={true} onClick={[Function]} action="OK">
diff --git a/packages/main/__karma_snapshots__/MonthPicker.md b/packages/main/__karma_snapshots__/MonthPicker.md
index 686f8060d86..afd495b3b17 100644
--- a/packages/main/__karma_snapshots__/MonthPicker.md
+++ b/packages/main/__karma_snapshots__/MonthPicker.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <MonthPicker>
         <ui5-month-picker class="" />
diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md
index 502852c48d0..6bb870130b4 100644
--- a/packages/main/__karma_snapshots__/ObjectPage.md
+++ b/packages/main/__karma_snapshots__/ObjectPage.md
@@ -36,27 +36,21 @@
                           www.myurl.com
                         </ui5-link>
                       </Link>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 1
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 2
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 3
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 1
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 2
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 3
+                        </span>
+                      </Text>
                     </div>
                   </span>
                 </div>
@@ -372,27 +366,21 @@
                           www.myurl.com
                         </ui5-link>
                       </Link>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 1
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 2
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 3
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 1
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 2
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 3
+                        </span>
+                      </Text>
                     </div>
                   </span>
                 </div>
@@ -542,27 +530,21 @@
                           www.myurl.com
                         </ui5-link>
                       </Link>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 1
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 2
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
-                      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-                        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-                          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-                            Address 3
-                          </span>
-                        </Component>
-                      </WithStyles(Component)>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 1
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 2
+                        </span>
+                      </Text>
+                      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+                        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+                          Address 3
+                        </span>
+                      </Text>
                     </div>
                   </span>
                 </div>
diff --git a/packages/main/__karma_snapshots__/Option.md b/packages/main/__karma_snapshots__/Option.md
index 7acd6473e7b..0872e9d94ac 100644
--- a/packages/main/__karma_snapshots__/Option.md
+++ b/packages/main/__karma_snapshots__/Option.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Option icon={{...}}>
         <ui5-option icon={{...}} class="" />
diff --git a/packages/main/__karma_snapshots__/Popover.md b/packages/main/__karma_snapshots__/Popover.md
index ec39ed96ef5..b0493bd93ca 100644
--- a/packages/main/__karma_snapshots__/Popover.md
+++ b/packages/main/__karma_snapshots__/Popover.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Popover initialFocus={{...}} headerText="" placementType="Right" horizontalAlign="Center" verticalAlign="Center">
         <WithWebComponent(Popover) initialFocus={{...}} headerText="" placementType="Right" horizontalAlign="Center" verticalAlign="Center">
diff --git a/packages/main/__karma_snapshots__/Select.md b/packages/main/__karma_snapshots__/Select.md
index f6f538beefb..a0a4c88cce7 100644
--- a/packages/main/__karma_snapshots__/Select.md
+++ b/packages/main/__karma_snapshots__/Select.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Select valueState="None">
         <ui5-select value-state="None" class="" />
diff --git a/packages/main/__karma_snapshots__/ShellBarItem.md b/packages/main/__karma_snapshots__/ShellBarItem.md
index 7877de5d9d7..505d2d09aab 100644
--- a/packages/main/__karma_snapshots__/ShellBarItem.md
+++ b/packages/main/__karma_snapshots__/ShellBarItem.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <ShellBarItem>
         <ui5-shellbar-item class="" />
diff --git a/packages/main/__karma_snapshots__/Switch.md b/packages/main/__karma_snapshots__/Switch.md
index 5b94c639766..2fc3507bb45 100644
--- a/packages/main/__karma_snapshots__/Switch.md
+++ b/packages/main/__karma_snapshots__/Switch.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Switch>
         <ui5-switch class="" />
diff --git a/packages/main/__karma_snapshots__/TabContainer.md b/packages/main/__karma_snapshots__/TabContainer.md
index 1d582710a39..c166bac17fd 100644
--- a/packages/main/__karma_snapshots__/TabContainer.md
+++ b/packages/main/__karma_snapshots__/TabContainer.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TabContainer>
         <ui5-tabcontainer class="" />
diff --git a/packages/main/__karma_snapshots__/TabSeparator.md b/packages/main/__karma_snapshots__/TabSeparator.md
index b1f273f9420..11334e1cda7 100644
--- a/packages/main/__karma_snapshots__/TabSeparator.md
+++ b/packages/main/__karma_snapshots__/TabSeparator.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TabSeparator>
         <ui5-tab-separator class="" />
diff --git a/packages/main/__karma_snapshots__/Table.md b/packages/main/__karma_snapshots__/Table.md
index de8e7968785..4fdf9fdb50f 100644
--- a/packages/main/__karma_snapshots__/Table.md
+++ b/packages/main/__karma_snapshots__/Table.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Table>
         <ui5-table class="" />
diff --git a/packages/main/__karma_snapshots__/TableCell.md b/packages/main/__karma_snapshots__/TableCell.md
index 1bb729309df..8e02ced3612 100644
--- a/packages/main/__karma_snapshots__/TableCell.md
+++ b/packages/main/__karma_snapshots__/TableCell.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TableCell>
         <ui5-table-cell class="" />
diff --git a/packages/main/__karma_snapshots__/TableColumn.md b/packages/main/__karma_snapshots__/TableColumn.md
index 03974c4827e..a42a55bbf05 100644
--- a/packages/main/__karma_snapshots__/TableColumn.md
+++ b/packages/main/__karma_snapshots__/TableColumn.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TableColumn minWidth={Infinity} width="">
         <ui5-table-column min-width={Infinity} width="" class="" />
diff --git a/packages/main/__karma_snapshots__/TableRow.md b/packages/main/__karma_snapshots__/TableRow.md
index 24bd65e6838..ba8682aa715 100644
--- a/packages/main/__karma_snapshots__/TableRow.md
+++ b/packages/main/__karma_snapshots__/TableRow.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TableRow>
         <ui5-table-row class="" />
diff --git a/packages/main/__karma_snapshots__/Text.md b/packages/main/__karma_snapshots__/Text.md
index a41077c2846..cf089099f7f 100644
--- a/packages/main/__karma_snapshots__/Text.md
+++ b/packages/main/__karma_snapshots__/Text.md
@@ -6,13 +6,11 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(Component) renderWhitespace={false} wrapping={true} width={{...}}>
-        <Component renderWhitespace={false} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-          <span style={{...}} className="Component-text---" title={[undefined]} slot={[undefined]}>
-            FioriText
-          </span>
-        </Component>
-      </WithStyles(Component)>
+      <Text renderWhitespace={false} wrapping={true} width={{...}}>
+        <span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
+          FioriText
+        </span>
+      </Text>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -24,13 +22,11 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(Component) wrapping={false} renderWhitespace={false} width={{...}}>
-        <Component wrapping={false} renderWhitespace={false} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-          <span style={{...}} className="Component-text--- Component-noWrap---" title={[undefined]} slot={[undefined]}>
-            Lorem Ipsum dolor sit amed
-          </span>
-        </Component>
-      </WithStyles(Component)>
+      <Text wrapping={false} renderWhitespace={false} width={{...}}>
+        <span style={{...}} className="Text--text--- Text--noWrap---" title={[undefined]} slot={[undefined]}>
+          Lorem Ipsum dolor sit amed
+        </span>
+      </Text>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -42,13 +38,11 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(Component) renderWhitespace={true} wrapping={true} width={{...}}>
-        <Component renderWhitespace={true} wrapping={true} width={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
-          <span style={{...}} className="Component-text--- Component-renderWhitespace---" title={[undefined]} slot={[undefined]}>
-            Lorem Ipsum dolor sit amed
-          </span>
-        </Component>
-      </WithStyles(Component)>
+      <Text renderWhitespace={true} wrapping={true} width={{...}}>
+        <span style={{...}} className="Text--text--- Text--renderWhitespace---" title={[undefined]} slot={[undefined]}>
+          Lorem Ipsum dolor sit amed
+        </span>
+      </Text>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
diff --git a/packages/main/__karma_snapshots__/TextArea.md b/packages/main/__karma_snapshots__/TextArea.md
index a79d2d61462..1826267427b 100644
--- a/packages/main/__karma_snapshots__/TextArea.md
+++ b/packages/main/__karma_snapshots__/TextArea.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TextArea rows={0} maxLength={{...}} growingMaxLines={0}>
         <ui5-textarea rows={0} max-length={{...}} growing-max-lines={0} class="" />
diff --git a/packages/main/__karma_snapshots__/Timeline.md b/packages/main/__karma_snapshots__/Timeline.md
index 0644ca448ec..e5e51c88f43 100644
--- a/packages/main/__karma_snapshots__/Timeline.md
+++ b/packages/main/__karma_snapshots__/Timeline.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Timeline>
         <ui5-timeline class="" />
diff --git a/packages/main/__karma_snapshots__/TimelineItem.md b/packages/main/__karma_snapshots__/TimelineItem.md
index 5378fc3c50d..7a2165237f1 100644
--- a/packages/main/__karma_snapshots__/TimelineItem.md
+++ b/packages/main/__karma_snapshots__/TimelineItem.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <TimelineItem icon={{...}}>
         <ui5-timeline-item icon={{...}} class="" />
diff --git a/packages/main/__karma_snapshots__/Title.md b/packages/main/__karma_snapshots__/Title.md
index 4ce1d701e35..706a8f044c8 100644
--- a/packages/main/__karma_snapshots__/Title.md
+++ b/packages/main/__karma_snapshots__/Title.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Title level="H2">
         <ui5-title level="H2" class="" />
diff --git a/packages/main/__karma_snapshots__/ToggleButton.md b/packages/main/__karma_snapshots__/ToggleButton.md
index 9131268a6b5..a128305f507 100644
--- a/packages/main/__karma_snapshots__/ToggleButton.md
+++ b/packages/main/__karma_snapshots__/ToggleButton.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <ToggleButton design="Default">
         <ui5-togglebutton design="Default" class="" />
diff --git a/packages/main/__karma_snapshots__/Token.md b/packages/main/__karma_snapshots__/Token.md
index 28c01629d95..7797c5d138a 100644
--- a/packages/main/__karma_snapshots__/Token.md
+++ b/packages/main/__karma_snapshots__/Token.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Token>
         <ui5-token class="" />
diff --git a/packages/main/__karma_snapshots__/Tokenizer.md b/packages/main/__karma_snapshots__/Tokenizer.md
index 7cc05b9a11b..8b92b7474b1 100644
--- a/packages/main/__karma_snapshots__/Tokenizer.md
+++ b/packages/main/__karma_snapshots__/Tokenizer.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <Tokenizer>
         <ui5-tokenizer class="" />
diff --git a/packages/main/__karma_snapshots__/YearPicker.md b/packages/main/__karma_snapshots__/YearPicker.md
index be52a187ca8..09558a604f7 100644
--- a/packages/main/__karma_snapshots__/YearPicker.md
+++ b/packages/main/__karma_snapshots__/YearPicker.md
@@ -4,7 +4,7 @@
 
 ```
 <ThemeProvider withToastContainer={false}>
-  <JssProvider generateId={[Function]} id={{...}}>
+  <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
       <YearPicker>
         <ui5-yearpicker class="" />
diff --git a/packages/main/src/components/Text/index.tsx b/packages/main/src/components/Text/index.tsx
index f6af0076b4e..7205e488705 100644
--- a/packages/main/src/components/Text/index.tsx
+++ b/packages/main/src/components/Text/index.tsx
@@ -1,7 +1,8 @@
-import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { CSSProperties, FC, ReactNode } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { CSSProperties, FC, forwardRef, ReactNode, Ref } from 'react';
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
 import { ThemeOptions } from '../../interfaces/ThemeOptions';
 import { TextStyles } from './Text.jss';
 
@@ -22,21 +23,11 @@ export interface TextProps extends CommonProps {
   width?: CSSProperties['width'];
 }
 
-interface TextInternalProps extends TextProps, ClassProps {}
+const useStyles = createUseStyles<JSSTheme, string>(TextStyles, { name: 'Text' });
 
-export const Text: FC<TextProps> = withStyles(TextStyles)((props: TextProps) => {
-  const {
-    classes,
-    children,
-    renderWhitespace,
-    wrapping,
-    width,
-    className,
-    style,
-    tooltip,
-    innerRef,
-    slot
-  } = props as TextInternalProps;
+const Text: FC<TextProps> = forwardRef((props: TextProps, ref: Ref<HTMLSpanElement>) => {
+  const { children, renderWhitespace, wrapping, width, className, style, tooltip, slot } = props;
+  const classes = useStyles();
   const classNameString = StyleClassHelper.of(classes.text);
   if (wrapping === false) {
     classNameString.put(classes.noWrap);
@@ -52,7 +43,7 @@ export const Text: FC<TextProps> = withStyles(TextStyles)((props: TextProps) =>
     Object.assign(inlineStyles, style);
   }
   return (
-    <span ref={innerRef} style={inlineStyles} className={classNameString.toString()} title={tooltip} slot={slot}>
+    <span ref={ref} style={inlineStyles} className={classNameString.toString()} title={tooltip} slot={slot}>
       {children}
     </span>
   );
@@ -63,3 +54,7 @@ Text.defaultProps = {
   wrapping: true,
   width: null
 };
+
+Text.displayName = 'Text';
+
+export { Text };