컴포넌트의 div 내의 버튼에 스타일을 적용하는 방법

컴포넌트의 div 내의 버튼에 스타일을 적용하는 방법

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

각 변종마다 스타일이 다릅니다.

이 문제를 해결하기 위해 클래스를 슬롯바인드에 바인딩하는 대신 버튼 그룹에 클래스를 적용하고 각 버튼에서 해당 변수 바인딩을 사용하거나 css를 통해 해결할 수 있습니다.따라서 css가 부통그룹에 클래스를 부여하는 방법을 보여주고 css에서 다음과 같이 하도록 제안했습니다.

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

언급URL : https://stackoverflow.com/questions/67164842/how-to-apply-style-to-buttons-within-div-in-a-component