Question

我正在尝试将Fabric js组件（Dropdown）样式化（样式化组件）作为react组件。

css类名称在文件office-ui-fabric-react / lib / components / Dropdown / Dropdown.scss.d.ts中声明。示例：

export declare const root = "root_15a7b352";

我想导入该类名，以便可以在样式中使用它。

AFAIK，这是TypeScript全局变量，我试图寻找有关如何获取它的信息，但没有成功。

Answer 1

语句declare const root与const root不同。这意味着：

在其他地方有一个名为 root 的变量，我只是在这里描述它。

换句话说，它告诉我们类型级别的内容，但是不包含任何可执行代码。在运行时无法使用它。您可以通过检查TypeScript playground中生成的代码来进行验证。

很可能是从其他地方导入的，或者实际上是全局变量。由于声明文件描述了Dropdown.scss，因此root很可能是该文件中的CSS类。试试：

import { root } from 'office-ui-fabric-react/lib/components/Dropdown/Dropdown.scss'

Answer 2

Karol Majeswski's Answer可以正确地从打字稿中导入变量。

但是，看来您的意图是使用styled-components为下拉菜单的某些部分设置样式，而不是从scss文件导入此变量，Dropdown组件提供了可读取的类名，例如ms-Dropdown-title，可用于样式设置。

例如为下拉菜单设置样式，您可以使用：

const StyledDropdown = styled(Dropdown)`
  color: red;

  & .ms-Dropdown-title {
    background-color: red;
  }
`;