Cant support className when use React Component in Vue

[xQuotes]

When I wrote a react component index.jsx

export const SupportCard = (props) => {
    const { data = [] } = props.props.attrs
    return (<div class="support-cards">
        {data.map((v, i) => {
            return <a className="support-card-item" href={v.href} key={i}>
                <img className="support-card-img" src={v.src} alt="" />
                <div className="support-card-content">
                    <div className="support-card-title">{v.title || ''} 〉</div>
                    <div className="support-card-desc">{v.desc || ''}</div>
                </div>
            </a>
        })}
    </div>)
}

And use in Vue web.vue

<template>
  <node-view-wrapper>
    <component-wraper :attrs="node.attrs" :updateAttributes="updateAttributes">
      <support-card :attrs="node.attrs" />
    </component-wraper>
  </node-view-wrapper>
</template>

<script>
import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2'
import { SupportCard } from './index.jsx'
import { ComponentWraper } from '../common/WraperEditor'

export default {
  props: nodeViewProps,

  components: {
    'support-card': SupportCard,
    'component-wraper': ComponentWraper,
    NodeViewWrapper,
  },
}
</script>

<style lang="scss">
.support-cards {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  pointer-events: none;

  .support-card-item {
    flex: 1;

    .support-card-img {
      widows: 80px;
      height: 80px;
      margin: 10px;
    }

    .support-card-title {
      text-align: center;
    }
  }
}
</style>

The style cant word.

I need change className to class in index.jsx , the style will be fine.

export const SupportCard = (props) => {
    const { data = [] } = props.props.attrs
    return (<div class="support-cards">
        {data.map((v, i) => {
            return <a class="support-card-item" href={v.href} key={i}>
                <img class="support-card-img" src={v.src} alt="" />
                <div class="support-card-content">
                    <div class="support-card-title">{v.title || ''} 〉</div>
                    <div class="support-card-desc">{v.desc || ''}</div>
                </div>
            </a>
        })}
    </div>)
}