vue3 h如何添加样式

const SearchInput = (props: VNodeProps, { emit }: any) => {
    return h('div', { class: 'search-box' }, [
      h(ElInput, {
        ref: inputRef,
        class: 'search-input',
        placeholder: '输入并回车',
        modelValue: input.value,
        'onUpdate:modelValue': (value: string) => emit('update:modelValue', value),
        onKeyupEnter
      })
    ])
  }

除了加style属性外，还可以怎么加样式，并且支持scoped。我是用.ts文件格式写的

Vue 3可以使用多种方式来添加样式，以下是其中一些常见的方法：

使用内联样式
在Vue 3中，可以通过在元素上使用style属性来添加内联样式。例如：

<template>
  <div style="color: red;">这是一段文本</div>
</template>

使用样式表
可以在Vue组件的style标签中添加CSS样式，这样样式会应用于该组件中的所有元素。例如：

<template>
  <div class="text">这是一段文本</div>
</template>

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

使用全局样式表
可以在Vue应用程序的根组件上使用全局样式表。这样，样式将应用于整个应用程序中的所有组件和元素。例如：

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

<!-- App.vue -->
<template>
  <div class="text">这是一段文本</div>
</template>

<!-- styles.css -->
.text {
  color: red;
}

使用CSS预处理器
Vue 3还支持使用CSS预处理器来编写样式，例如Sass、Less和Stylus等。可以通过在style标签中使用lang属性来指定预处理器。例如：

<template>
  <div class="text">这是一段文本</div>
</template>

<style lang="scss">
$text-color: red;

.text {
  color: $text-color;
}
</style>
  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7788695
  • 这篇博客也不错, 你可以看下Vue 引入样式Scoped不起错用，解决方案
  • 除此之外, 这篇博客: Vue style 属性 scoped 原理详解中的 （三）特殊用法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • scoped 这个属性就是专门用于实现样式的模块化的，使用这个属性意味着样式不能经过外部或者全局的调整，在使用之初就应该规划好。

    但有时候我们可能需要引入第三方组件，修改他的样式又不想去除 scoped 造成组件之间的样式污染，所以才有了下面的特殊用法。