React styling/component 未显示（MS Fabric UI）

Question

我有一个列表，我想使用 Microsoft Fabrics React "list" 组件设置样式，如下所示：

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

（带 "Rendering ghost items while the list is scrolling" header 的那个）。

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

 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 中通过以下参考：

imports import './List.Ghosting.Example.scss';

每个 List 组件都应用了预期的样式。在您的情况下，可以像这样应用这些样式：

import 'office-ui-fabric-react/lib/components/List/examples/List.Ghosting.Example.scss';

React styling/component 未显示（MS Fabric UI）

React styling/component not showing (MS Fabric UI)

javascript

typescript

reactjs

office-ui-fabric