Use emotion css function without exposing the component name in output class name

1k Views Asked by At

Added css to element as below:

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from '@emotion/react';

    function Icon() {
      return (
          <span
              css={css`
                  color: red;
                `}>
              Icon
          </span>
      );
    }
    export default Icon;

Class Name generated as class="css-1f6rj74-Icon" for the span element.

We don't want to expose component names to public.

How can I remove the Icon- Component name from generated css classname.?

  • React version: 17.0.2
  • "@emotion/react": "^11.1.5"
0

There are 0 best solutions below