Office UI Fabric - Как применить стили CSS к существующим компонентам - PullRequest
Новая
       36

Office UI Fabric - Как применить стили CSS к существующим компонентам

0 голосов
/ 22 ноября 2018

Я использую предоставленные компоненты, и каждый раз, когда мне нужно изменить стиль компонента, мне интересно, как правильно это сделать.

Допустим, мне нужно изменить цвет фона IconButton, когда он отключен.https://codepen.io/elsl/pen/KrQQdV

Если я предоставлю тему, как я узнаю, какая палитра / semanticColor используется этим компонентом? 

const iconsTheme = Fabric.createTheme({
  semanticColors: {
    disabledBackground: "#ff9933"
  }
});
    

<Fabric.IconButton
  iconProps={{iconName:'ChevronRight'}}
  disabled
  theme={iconsTheme}
/>

Если я предоставлю IButtonStyles, как я узнаю, что имя свойства - "rootDisabled.backgroundColor"? 

const iconButtonStyles: IButtonStyles = {
       rootDisabled: {
         backgroundColor: "#ff0000",
       }
};

<Fabric.IconButton
   iconProps={{iconName:'CalculatorEqualTo'}}
   disabled   
   styles={iconButtonStyles}
/>

Для обоих этих вариантов мне пришлось покопаться в исходном коде компонента на github, чтобы выяснить.

Это ожидаемый / правильный путь? Если это так, между созданием Темы или IStyle, который был бы идеальной / лучшей практикой?

1 Ответ

0 голосов
/ 27 ноября 2018

Тема против IStyles

Я бы сказал, используйте тему, если хотите, чтобы все компоненты Fabric имели одинаковую настройку.

Используйте свойство styles, если вы просто хотите настроить этот конкретный компонент (или этот конкретный экземпляр компонента).

Как обнаружить укладку при использовании IStyles

Есть четыре способа, которые приходят на ум.

  1. Посмотрите документацию (например, https://developer.microsoft.com/en-us/fabric#/components/dropdown, посмотрите на интерфейс IDropdownStyles) ( снимок экрана )
  2. Используйте IntelliSense, если вы используете редактор, такой как код Visual Studio, который автоматически перечисляет IComponentStyles ипредоставляет документацию, если таковая имеется.
  3. Проверка DOM часто дает подсказки (области крючков обычно выглядят как {area}-{number}, поэтому root-33, например, где имя "area" равно root.
  4. Прочитайте исходный код.

К сожалению, для варианта 1 и варианта 2 Fabric React не полностью соответствует документации IComponentStyles, поэтому не все компоненты имеют одинаково описательные комментарии, и в этих случаях вы можетенеобходимо перейти к варианту 3 и варианту 4.

...