재사용 가능한 VueJS 컴포넌트에서의 테일윈드 CSS 클래스 덮어쓰기

재사용 가능한 VueJS 컴포넌트에서의 테일윈드 CSS 클래스 덮어쓰기

TailwindCSS를 사용하여 VueJS 버튼 컴포넌트를 만들었습니다.제 목표는 버튼 컴포넌트에 몇 가지 기본 스타일(후풍 css 클래스 사용)을 제공하고 필요할 때 덮어쓸 수 있는 옵션(후풍 css 클래스 사용)을 제공하는 것입니다.

예를 들어 다음과 같은 단순화된 버전의Button컴포넌트:

// Button.vue

<template>
  <button class="bg-green-500 text-white py-2 px-4 rounded">
    Click Me
  </button>
</template>

다음은 다른 파일에서 해당 컴포넌트를 사용하는 예입니다.

// index.vue

<Button></Button>
<Button class="bg-red-600"></Button>
<Button class="bg-blue-600"></Button>

문제는 이것이 반쪽만 작동한다는 것이다.즉,bg-blue-600를 덮어씁니까?bg-green-500디폴트로 설정했습니다.Button.vue.그렇지만bg-red-600는 배경색을 덮어쓰지 않습니다(추정적으로 이유는bg-red-600는 css 소스 코드보다 먼저 표시됩니다.

그래서 어떻게 하면 제대로 셋업을 할 수 있을까요?즉, 어떻게 하면,Button일부 기본 스타일(다시 말해서 순풍 css 클래스 사용)을 구성하는 동시에 순풍 css 클래스를 사용하여 이러한 스타일을 재정의하는 옵션도 제공합니다.

고마워요.

이는 컴포넌트 속성이class에Buttonhtml까지 간지럽히지 않음button. 이렇게 하려면 속성을 자녀에게 바인드합니다.

<button v-bind="$attrs"...>

그러면 버튼에서 지정한 모든 속성(소품 아님)이 html 단추에 바인딩됩니다.

그렇긴 하지만, 저는 개인적으로 다음 명령어를 사용하여 버튼 클래스를 만드는 것을 선호합니다.@apply지시하고 재사용할 수 있습니다.

@apply 디렉티브를 사용하여 순풍 클래스를 만드는 경우 !important를 추가하여 사용 시 다른 색상 클래스를 덮어쓸 수 있습니다.

컴포넌트에서 순풍 지시어를 사용하려면 lang="postcss" 속성을 사용해야 합니다.

<style lang="postcss">
.my-overriding-class{
    @apply bg-red-600 !important 
}

회피책으로 다음과 같은 소품을 사용할 수 있습니다.

<!-- Button.vue -->
<template>
  <button :class="background + ' text-white py-2 px-4 rounded'">
    Click Me
  </button>
</template>

<script>
export default {
  props: {
    background: {
      type: String,
      default: "bg-green-500",
    },
  },
};
</script>

<!-- index.vue -->
<Button background="bg-red-600"></Button>
<Button background="bg-blue-600"></Button>

언급URL : https://stackoverflow.com/questions/62529550/overriding-tailwind-css-classes-in-a-reusable-vuejs-component