可以帮我一下 CSS 选择器吗?

从我看到的代码来看,您可能会看到以下类名:

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

您可以创建一个组并将其设置为主要组。
您还可以使用一些代码来添加缺失的类名。

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

export default apiInitializer((api) => {
  // Add the groups you wants to add
  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;
      }
    };
  });
});

然后,您可以使用 CSS 目标定位 .group--trust_level_4

示例:

.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;
    }
}
1 个赞