vue3中css使用js中的变量

<script setup lang="ts">
import { SoundOutlined } from '@ant-design/icons-vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#000'
  },
  bgColor: {
    type: String,
    default: '#fffbe8'
  },
  height: {
    type: Number,
    default: 32
  },
  translateX: {
    type: String,
    default: ''
  }
})
const comHeight= computed(()=>`${props.height}px`)
</script>

<style>
.marquee_box {
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: v-bind(bgColor);
}
.marquee {
  flex: 1;
  overflow: hidden;
  margin-left: 10px;
}
.marquee div {
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(v-bind(translateX));
  }
}
</style>

核心是v-bind() 可以使用js中的变量 注意：v-bind(height)px 不生效 v-bind(comHeight)才生效 v-bind绑定是要一个整体