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

Posted 2023-02-22

【中文标题】如何将样式应用于组件中 div 内的按钮？

【英文标题】：How to apply style to buttons within div in a component?

【发布时间】：2021-07-13 19:38:22

【问题描述】：

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

组件

<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;

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

【参考方案1】：

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

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