Некоторые значки UI-Fabric не работают в веб-частях spfx React

Я скачал стороннюю веб-часть с Github

Некоторые значки пользовательского интерфейса не работают в сторонней веб-части, которую я скачал с Github.

Я использую Microsoft CDN для загрузки CSS. Версия CSS, которую я пробовал:

1.

2.

Большинство иконок работают, когда я использую ms-Icon ms-Icon--'IconName', Но пользователи сообщили, что некоторые значки не работают, что я перечисляю здесь:

HandsFree

Warning12

Transition

TimeSheet

Commitments

Calculator

1. В настоящее время мы используем версию 9 CSS CDN из пользовательского интерфейса. Я попытался изменить версию CSS на 10, которая является самой последней, но все еще некоторые значки все еще не работают, а некоторые работают.

2. Github блоги говорят ms-Fabric класс должен быть добавлен в корневой div HTML, чтобы все иконки работали. Я проверил, что этот класс уже добавлен в корневой div. Поэтому я попытался добавить этот класс к непосредственному родителю промежутка, но некоторые значки все еще не решены.

3. У меня было сомнение, что, возможно, есть какая-то проблема с конфигурацией этих значков из библиотеки MS Fabric. Поэтому, чтобы проверить это, я воспроизвел структуру на онлайн-сайте под названием "codepen" и обнаружил, что с этими значками проблем нет. Существует определенная проблема с тем, как он используется.

То, как я загружаю CSS в файл.js:

sp_loader_1.SPComponentLoader.loadCss('https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css');

Вот код, который я написал, чтобы привязать значок к элементам управления:

public renderAdvancedDefaultLayout(item: any): JSX.Element{
    return(
      <div className={styles["box-link"]} role="link" key={"item- 
      "+this.props.links.indexOf(item)}>
        <a href={item[urlField]} target={item[openNewTabField] ? "_blank" : 
          ""}>
          <div className={styles["box-button"]+" "+(item[isBlueField] ? 
           styles["blue"] : "")}>
            <i className={item[iconField] ? "ms-Icon ms-Icon-- 
              "+item[iconField] : ""}></i>
            {item[urlField+"_text"]}
          </div>
        </a>   
      </div>
    );
  }

Я хочу, чтобы все иконки работали с использованием этих CDN. В настоящее время большинство значков работают, но не много (по крайней мере, перечисленные). Любая помощь будет принята с благодарностью. Спросите меня, если я пропущу, чтобы добавить какую-либо информацию здесь.

0 ответов

Другие вопросы по тегам