cssangularnebular

How to change styles in Nebular inside a nb-user tag?

I'm trying to change the font-weight and border-radius of a nb-user tag with no success. I'd tried to add a class and change it from the .scss and nothing happened

This is the HTML

<div class="teachers-box" *ngFor="let user of usuarios">
      <nb-user
        size="medium"
        name="{{ user.name }}"
        color="#d8d8d8"
        onlyPicture
        class="teacher-box"
      >
      </nb-user>
    </div>

This are the .scss classes

.teachers-box {
  margin-left: -13px;
}

.teacher-box {
  font-weight: bold;
  border: solid 2px #ffffff;
}

The teacher-box, that is the one inside the nb-user tag are not working. This is not working enter image description here

This is working, but I wrote it in the browser. I have to write it in a tag that is not visible in the text editor

enter image description here

Solution

  • You would need to target the nb-user directly.

    .teachers-box nb-user {
   margin-left: 13px;
}

    Another example getting more granular

    .teachers-box nb-user .user-name,
.teachers-box nb-user .user-title,
.teachers-box nb-user .user-picture,
.teachers-box nb-icon {
  some css here...
}