Office UI Fabric React People Picker Remove 'X'

Question

Is there a way I can have certain personas unremovable from people picker? I was thinking how I can remove the X button:

On the screenshot, I need to disable removal of test user2 and Test 115 while Staff Test remaining the same.

Answer 1

Addd disabledPP class to your people picker you want to hide (X) and use below CSS:

.disabledPP {
  font-family: inherit;
}
.disabledPP > div > div > div, .disabledPP > div > div > div:hover {
  border-color: #f4f4f4 !important;
}
.disabledPP button {
  pointer-events: none !important;
  display: none;
}