如何将样式应用于组件中 div 内的按钮？

Question

我正在尝试在 div 中制作一个带有按钮的组件，我遇到了问题，因为样式不适用于按钮，我想我不应该在这里使用插槽。有人可以指导我吗？

组件

<template>
  <div :class="[$style.btnGroup]" v-bind="$attrs">
    <slot :class="$style[variant]">/>
  </div>
</template>

我如何使用它

<ButtonGroup variant="warning">
      <button>Test</button>
      <button>Test</button>
      <button>Test</button>
    </ButtonGroup>

我使用css模块 <style module>


.btnGroup button {
  position: relative;
  border: none;
  font-weight: 400;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition: 0.1s;
}

.primary{
  background: var(--primary-bg);
  border: 1px solid var(--primary-bg);
  color: white;
}

.warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bg);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  transition: 0.1s;
  color: black;
}

等对于每个变体，我都有不同的风格。

Answer 1

您正在按钮组而不是内部按钮上应用 class 来解决此问题，而不是将 class 绑定到槽绑定另一个变量并在每个变量上使用该变量绑定按钮或者你可以通过 css 解决它，这就是为什么我建议你向我们展示 css 按你正在做的方式给按钮组一个 class 并且在 css 中这样做:

<slot class="buttongroupclass">/>
.buttongroupclass button{
//the css you want to apply
}

如何将样式应用于组件中 div 内的按钮？

How to apply style to buttons within div in a component?

vue.js

vue-component

vuejs2

vuejs3