CSS 선택자 관련 작은 도움 좀 부탁드려요?

[Arkshine]

코드를 살펴본 결과, 다음과 같은 클래스명이 사용될 것으로 예상됩니다:

• is-staff
• is-admin
• is-moderator
• is-new-user
• group--primary_group_name

그룹을 생성하고 이를 기본 그룹으로 설정할 수 있습니다.

또한 일부 코드를 사용하여 누락된 클래스명을 추가할 수도 있습니다.

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => { 
  // 추가하려는 그룹을 추가합니다
  const allowedGroups = ["trust_level_4"];

  api.modifyClass("components:chat/message/info", () => {
    return class extends SuperClass {
      @service currentUser;
      
      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`)
          .join(" ");
      
        return super.usernameClasses + " " + allowedGroupClasses;
      }
    }
  })
});

이후 .group--trust_level_4를 사용하여 CSS를 적용할 수 있습니다.

예시:

.chat-message-info__username.group--trust_level_4 {
    .chat-message-info__username__name {
        color: blue;
    }
}

사용자 이름의 경우, 위의 코드가 필요하지 않습니다:

.chat-message-info__username.[data-user-card="username_here"]  {
    .chat-message-info__username__name {
        color: red;
    }
}