Contextual Class Names for base components

[yuriy-sng]

Is your feature request related to a problem? Please describe.
When I inspect the elements in the browser, only the "wrapper" React component name is present in the class attributes. Theme UI's base component names such as Heading or Image do not show up.

Describe the solution you'd like
Base components such as Heading or Image should show its name in the rendered element's class attribute for easier debugging.

Additional context

Source code

/** @jsx jsx */
import React, { FunctionComponent } from "react";
import { jsx, Flex, Heading, Text, Image } from "theme-ui";

const UsersImporter: FunctionComponent = () => {
  return (
    <Flex
      as="article"
      data-testid="info-clip"
      sx={{
        flexDirection: "column",
        px: "35%",
        py: "6em",
        bg: "lightgray"
      }}
    >
      <Heading>My users</Heading>
      <Heading
        mb={2}
        sx={{
          textAlign: "center"
        }}
      >
        IMPORT YOUR USER
      </Heading>
      <Image alt="import information" src="https://picsum.photos/300/100" />
      <Text as="p">Lorem ipsum</Text>
    </Flex>
  );
};

Rendered HTML in the browser

<article data-testid="info-clip" class="css-nxzrfe-UsersImporter">
  <h2 class="css-1r1c8td">My users</h2>
  <h2 class="css-1cytxyy-UsersImporter">IMPORT YOUR USER</h2>
  <img
    alt="import information"
    src="https://picsum.photos/300/100"
    class="css-9taffg"
  />
  <p class="css-vurnku">Lorem ipsum</p>
</article>

Expected HTML

<article data-testid="info-clip" class="css-nxzrfe-UsersImporter css-nxzrfe-Flex">
  <h2 class="css-1r1c8td-Heading">My users</h2>
  <h2 class="css-1cytxyy-UsersImporter css-1cytxyy-Heading">IMPORT YOUR USER</h2>
  <img
    alt="import information"
    src="https://picsum.photos/300/100"
    class="css-9taffg-Image"
  />
  <p class="css-vurnku-Text">Lorem ipsum</p>
</article>

[lachlanjc]

Yep, huge agree here. Let’s close as a duplicate of #1080 though @hasparus