как указать собственный стиль Office UI fabri c (например: Pivot Control) в файле s css - PullRequest
Новая
       25

как указать собственный стиль Office UI fabri c (например: Pivot Control) в файле s css

0 голосов
/ 26 мая 2020

У меня есть компонент реакции, который использует Office UI fabri c Pivot control. В рамках брендинга необходимо внести некоторые изменения в свойства linkContent и linkIsSelected . Я могу сделать весь свой брендинг в том же файле tsx, где записан элемент управления Pivot. Но я не могу переместить все настройки в файл s css и сослаться на tsx . 

const pivotStyles: Partial<IPivotStyles> = {
      root: [
          normalize,
          {
            // position: 'relative',
            // color: 'white'
           display: 'flex', flexWrap: 'wrap'
          }
        ],
      linkContent : {
           color:'#333'
      },
      linkIsSelected : [{
        backgroundColor:  '#707175',
        fontWeight: FontWeights.bold,
        selectors: {
        ':before': {
                backgroundColor: 'transparent',
                transition: 'none',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                content: '""',
                height: 'auto'
              },
        ':hover': {
                    backgroundColor: '#707175',
                    color: '#fff'
                  },
                  '&:active': {
                    fontWeight: FontWeights.bold,
                    backgroundColor: '#707175',
                    color : '#fff'
                  },
              [HighContrastSelector]: {
                fontWeight: FontWeights.bold,
                MsHighContrastAdjust: 'none'
              }
        }

      }],
      link: [
          {
            selectors: {
              '&:hover, &:focus': {
               backgroundColor: '#707175'
              },
              '&:active, &:hover': {
                color: '#fff',
                backgroundColor: '#707175'
              }
            }
          }
        ],
      itemContainer : {
       borderTop:'1px solid #707175',
          paddingTop:20 
      }
    };

Вот элемент управления, ссылающийся на вышеуказанный стиль 

 <Pivot linkFormat={PivotLinkFormat.tabs} styles={pivotStyles}>
              <PivotItem headerText="Tab1"></PivotItem>
              <PivotItem headerText="Tab2"></PivotItem>
              <PivotItem headerText="Tab3"></PivotItem>
       </Pivot>

Я не нашел документации / образца для этого сценария. Любая помощь приветствуется.

...