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

user_15691725 0
Viewed 97

I am trying to make a component with buttons inside a div, I am having issues, because the styles are not applying on the buttons, I guess I should not use slot here. Can someone guide me?

Component

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

How I use this

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

I use css module <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;
}

etc. for each variant I have different style.

vuejs2 vuejs3 vue-component vue.js
1 Answers

You are applying the class on the button group not the buttons that are inside, to solve this instead of binding the class to the slot bind another variable and use that variable binding on each button or you can solve it through css thats why i suggested you show us the css give a class to the buttongroup the way you are doing and in css do as so:

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