Class attribute priority under inheritAttrs in vue

[jackhe16]

I use @emotion/css to work with vue. There is a priority issue between the class attribute automatically passed by the parent component and the internal class of the component.

Vue will pass attribute by default, see https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance. And emotion will insert a style immediately when it encounters a css function. Therefore, the style of the child component is always arranged behind and always overwrites the style specified by the parent component. What if I need the style specified by the parent component to have a higher priority?

I can use the following ways to solve this problem. And is there any other solution to this problem? Thanks!

Parent.tsx

import { defineComponent } from "vue";
import { css } from "@emotion/css";

import Child from "./Child";

export default defineComponent({
  props: {},
  setup() {
    return () => {
      return (
        <Child
          class={css`
            font-size: 20px;
          `}
          msg="Hello, World!"
        />
      );
    };
  },
});

Child.tsx

import { defineComponent } from "vue";
import { css, cx } from "@emotion/css";

export default defineComponent({
  inheritAttrs: false,
  props: {
    msg: { type: String, default: "" },
  },
  setup(props, ctx) {
    return () => {
      return (
        <div
          class={cx(
            css`
              font-size: 16px;
            `,
            ctx.attrs.class as string
          )}
        >
          {props.msg}
        </div>
      );
    };
  },
});

If needed, there is a relevant code repository.

[Andarist]

I'm not sure if I understand the problem that you are seeing. When you are using cx the parent class name can freely "overwrite" the styles specified by the child. This is exactly what I'm seeing when running your demo:

[jackhe16]

We always hope that the style specified by the parent component has a higher priority, but by default, the css function in the parent component will be executed first, and then the css function of the child component will be executed, so by default, the child component style has a higher priority. I must write these codes clearly on all components,

    class={cx(
      css`
        font-size: 16px;
      `,
      ctx.attrs.class as string
    )}

This looks a bit against DRY, doesn't it?

[jackhe16]

I hope that by default, such code can take effect, I want to know if it is possible?

Parent.tsx

import { defineComponent } from "vue";
import { css } from "@emotion/css";

import Child from "./Child";

export default defineComponent({
  props: {},
  setup() {
    return () => {
      return (
        <Child
          class={css`
            font-size: 20px;
          `}
          msg="Hello, World!"
        />
      );
    };
  },
});

Child.tsx

import { defineComponent } from "vue";
import { css } from "@emotion/css";

export default defineComponent({
  props: {
    msg: { type: String, default: "" },
  },
  setup(props) {
    return () => {
      return (
        <div
          class={css`
            font-size: 16px;
          `}
        >
          {props.msg}
        </div>
      );
    };
  },
});

[jackhe16]

BTW, the relevant code has been updated.