vue.js - 如何将样式应用于组件中 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

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

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