在NormalPeoplePicker中使用onRenderItem时，角色角色样式已损坏

问题描述

我正在使用normalPeoplePicker中的office-ui-fabric-react。我覆盖了onRenderItem事件，但它破坏了Persona风格。我提供了两张图片和代码，感谢您的解决方案。

private onRenderItem(props: IPickerItemProps<IPersonaProps>):JSX.Element {
    return (<div className={ "ms-FocusZone ms-PickerPersona-container personaContainer_894c3072" }>
      <div className={ "ms-PickerItem-content itemContent_894c3072" }>
        <Persona
            { ...props.item }
            size={ PersonaSize.regular }
            hidePersonaDetails={ false }
        />
      </div>
      <div className={ "ms-PickerItem-content itemContent_894c3072" }>
        <IconButton
            iconProps={{ iconName: 'Cancel' }}
            title="Cancel"
            ariaLabel="Cancel"
            onClick={ () => { this.ListPeoplePicker_RemoveItem(props.index); } }
          />
      </div>
    </div>);
}

private ListPeoplePicker_RemoveItem(index: number) {
    this.listPeoplePicker.items.splice(index,1);
    this.listPeoplePicker.forceUpdate();
}
return (
        <div>
            <normalPeoplePicker
                selectedItems={props.selectedItems}
                onResolveSuggestions={onFilterChanged}
                onRenderItem={onRenderItem}
                //onEmptyInputFocus={returnMostRecentlyUsed}
                getTextFromItem={getTextFromItem}
                pickerSuggestionsprops={suggestionProps}
                className={'ms-PeoplePicker text-300'}
                key={'normal'}
                // onValidateInput={validateInput}
                removeButtonAriaLabel={'Remove'}
                onItemSelected={onItemSelected}
                onChange={onChange}
                inputProps={{
                    placeholder: getPlaceholderText(),onBlur: onBlur,//onClick: (e) => { alert('click picker'); console.log(e,'click pick') },onFocus: (ev: React.FocusEvent<HTMLInputElement>) => {
                        setShowPlaceholder(true);
                        console.log('onFocus called')
                    },'aria-label': 'People Picker',}}
                defaultSelectedItems={props.selectedItems}
                componentRef={picker}
                onInputChange={onInputChange}
                resolveDelay={300}
                disabled={isPickerdisabled}
                styles={{ root: { width: 400,background: 'white' } }}
            />

        </div>
    );

原始样式：

更改后的样式：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）