Question

我有一个要使用Microsoft构造样式设置的列表，以显示“列表”组件，如下所示：

https://developer.microsoft.com/en-us/fabric#/components/list

（带有“在列表滚动时呈现幽灵项的标题”）。

我尝试按照以下示例进行操作：

 import { List } from 'office-ui-fabric-react/lib/List';
  import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';


 return (


  <div>


      { listItems.length > 0 && listItems.map((item: Project) => {

        return (


           <div>


        <div  data-is-focusable={true}  className="ms-ListGhostingExample- 
   itemCell">
     <Image 
     className="ms-ListGhostingExample-itemImage"
              src={item.ListUrl.substring(0, item.ListUrl.indexOf("/Lists")) + "/_api/GroupService/GetGroupImage?id" }
              width={50}
              height={50}
              imageFit={ImageFit.cover}

          />  

          <div className="ms-ListGhostingExample-itemContent">
          <div className="ms-ListGhostingExample-itemName"> <a  href={item.ListUrl.substring(0, item.ListUrl.indexOf("/Lists"))}>{item.Title}</a></div>

           </div></div>
           </div>


        );
      })}
      </div>

虽然我没有收到任何（语法）错误，但根本不应用任何样式。为什么它不起作用？

Answer 1

在Rendering ghost items while the list is scrolling example中通过以下引用：

<?php // test1.php $username = "Jan Kowalski"; echo $username; echo "<br>"; $current_user = $username; echo $current_user; ?>

每个imports import './List.Ghosting.Example.scss';组件都会应用预期的样式。在您的情况下，这些样式可以这样应用：

List

反应样式/组件未显示（MS Fabric UI）

1 个答案: