我正在嘗試使用 Fluent UI 在 React JS 中創建一個表單，但我注意到在日期選擇器中我丟失了所有圖標

Question

我正在嘗試使用 Fluent UI 在 React JS 中創建一個簡單的表單，但我注意到在日期選擇器中我在呈現時丟失了所有圖標。 這是我的代碼，任何人都可以幫助我解決我所缺少的問題。

import React from "react";
import "./App.css";
import {
  DatePicker,
  defaultDatePickerStrings,
  Dropdown,
  PrimaryButton,
  TextField,
  Stack
} from "@fluentui/react";


function App() {

  const dropdownStyles = {
    dropdown: { width: 300 },
  };

  const options = [
    { key: "male", text: "Male" },
    { key: "female", text: "Female" },
  ];

  function _alertClicked() {
    alert("Clicked");
  }

  const columnProps = {
    tokens: { childrenGap: 15 },
    styles: { root: { width: 300 } },
  };

  return (
    <div>
      <h1>Employee Form</h1>
      <Stack {...columnProps}>
        <TextField label="Enter Name" />

        <DatePicker
          isRequired
          // firstDayOfWeek={firstDayOfWeek}
          label="Date of Birth"
          placeholder="Select a date..."
          ariaLabel="Select a date"
          strings={defaultDatePickerStrings}
        />

        <Dropdown
          isRequired
          placeholder="Select an option"
          label="Select Gender"
          options={options}
          styles={dropdownStyles}
        />

        <TextField label="Address" multiline rows={4} />
        <PrimaryButton text="Submit" onClick={_alertClicked} />
      </Stack>
    </div>
  );
}

export default App;

這是 output 圖片。 如果您可以專注於日歷頂行中的灰色塊，則圖標會丟失。

Answer 1

您必須在應用程序的根目錄中初始化圖標：

import { initializeIcons } from '@fluentui/font-icons-mdl2';

initializeIcons();

更多信息在這里。