Как применить стиль к значку типа IIconProps в пользовательском интерфейсе Fluid?

У меня есть кнопка, как в примере ниже, со значком (addFriendIcon).

https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Как мне добавить стиль к этому значку? Например изменить цвет?

import * как React из 'react'; импортировать {ActionButton, IIconProps} из 'office-ui-fabric-react';

const addFriendIcon: IIconProps = {iconName: 'AddFriend'};

export const ButtonActionExample: React.FunctionComponent = props = ›{

return (Создать учетную запись); };


reactjs fluent-ui office-ui-fabric office-ui-fabric-react office-fabric
person EvilEddie    schedule 11.08.2020    source источник
comment
У вас есть рабочий пример, который вы можете предоставить? Если это компонент реакции, можете ли вы использовать className?   -  person Dom    schedule 12.08.2020
comment
Вот код с официального сайта MS Fluid codepen.io/evileddie/pen/   -  person EvilEddie    schedule 12.08.2020

Ответы (1)


arrow_upward
2
arrow_downward

Если вы хотите сделать это в стиле Fluent UI, просто добавьте соответствующие стили в IIconProps:

const addFriendIcon: IIconProps = {
  iconName: 'AddFriend',
  styles: {
    root: { color: 'red' }
  }
};

Вот скорректированный код: https://codepen.io/alex3683/pen/RwarOrb

person alex3683    schedule 14.08.2020