cannot appear as a descendant of

Question

I\'m seeing this. It\'s not a mystery what it is complaining about:

Warning: validateDOMnesting(...): 
 cannot appear as a descendant of 
. See         


        
      

Answer 1

If this error occurs while using Material UI https://material-ui.com/api/typography/, then you can easily change the

to a by changing the value of the component attribute of the element :

According to the typography docs:

component : The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component.

So Typography is picking

as a sensible default, which you can change. May come with side effects ... worked for me.