React에서 동적 클래스 이름과 함께 Tailwind CSS를 어떻게 사용할 수 있나요?

동적 클래스 이름과 함께 Tailwind CSS 사용

React 및 Tailwind CSS로 작업할 때 컨텍스트 변수와 같은 동적 값을 클래스 이름으로 전달하고 싶은 유혹을 느낄 수 있습니다. . 그러나 Tailwind에는 클래스 이름이 끊어지지 않은 완전한 문자열이어야 한다는 특정 요구 사항이 있습니다. 결과적으로 단순히 className에 보간된 변수를 전달하는 것은 예상대로 작동하지 않습니다.

Tailwind의 문서에는 "문자열 보간을 사용하거나 부분 클래스 이름을 함께 연결하는 경우 Tailwind에서 해당 항목을 찾지 못하므로 해당 CSS를 생성하지 마세요."

해결책: 완전한 클래스 이름 사용

동적 값과 함께 Tailwind를 효과적으로 사용하려면, 전체 값 세트로 클래스 이름을 정의하는 것이 중요합니다. 예를 들어 다음을 사용하는 대신

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

ThemeContext에서 직접 클래스를 정의하세요.

const colors = {
  // …
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // …
};

그런 다음 다음과 같이 구성 요소에서 사용하세요.

<p className={`${colors.secondary} text-text-white`}></p>

대안: 인라인 스타일링 사용

전체 클래스 이름을 정의하는 것이 불가능할 경우 스타일을 사용할 수도 있습니다. 동적 스타일을 적용하는 속성:

<p className="text-text-white">

이 접근 방식을 사용하면 동적 값으로 작업할 때 더 많은 유연성을 얻을 수 있지만 인라인 스타일을 사용해야 합니다.

위 내용은 React에서 동적 클래스 이름과 함께 Tailwind CSS를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!