Can't set class of React component

[dasmikko]

I'm trying to set the class of a React component, but can't get it to work.

I've also tried using className prop, but doesn't work either.

In the example, i'm trying to add the class "i-should-be-a-class" to the QuickPinchZoom react component, but the class never appears.

I can also see that this tag:

Is added. is it possible to disable the all:unset?

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Image</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <div class="h-full flex justify-center items-center overflow-hidden" ref="imgContainerRef">
          <QuickPinchZoom class="i-should-be-a-class" :onUpdate="onUpdate">
          <img
            :src="route.query.url" alt=""
            ref="imgRef"
          >
        </QuickPinchZoom>
      </div>
    </ion-content>
  </ion-page>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { watch, reactive, ref, onMounted} from 'vue'
import {applyReactInVue} from 'veaury'
import RQuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";

export default {
  name: 'ImageViewer',
  components: {
    QuickPinchZoom: applyReactInVue(RQuickPinchZoom)
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const imgRef = ref(null)
    const imgContainerRef = ref(null)

    const onUpdate = ({ x, y, scale }) => {
        const { value: img } = imgRef;

        if (img) {
          const value = make3dTransformValue({ x, y, scale });

          img.style.setProperty("transform", value);
        }
    }

    return {
      imgRef,
      router,
      route,
      imgContainerRef,
      onUpdate
    }

  }
}
</script>

<style lang="scss">
  .kvfysmfp {
    @apply h-full;
  }
</style>

[devilwjp]

In React, the class of a custom component needs to be obtained through the attribute className and manually set to the dom element. For example the following code:

Test.vue

<template>
  <ASimpleReactComponent class="red"/>
</template>

<script>
import { applyReactInVue } from 'veaury'
import ASimpleReactComponent from '../react_app/ASimpleReactComponent'
export default {
  components: {
    ASimpleReactComponent: applyReactInVue(ASimpleReactComponent)
  }
}
</script>

<style>
.red {
  color: red
}
</style>

ASimpleReactComponent

export default function (props) {
  return <div className={props.className}>
    test the font color is red?
  </div>
}

[devilwjp]

@dasmikko Regarding the 'div' element of all: unset, this is because the react component is used in the vue component, and the vue label is continued to be used in the children of the react component. During the conversion process, a container must be added.

[dasmikko]

I see, but thanks, making a sub react component did the trick!

[devilwjp]

@dasmikko I have been trying to solve the problem of removing this container, but until now I have no idea.

[devilwjp]

@dasmikko

npm i veaury@next

Try applyPureReactInVue ! https://github.com/devilwjp/veaury/blob/master/pure_mode.md