在 React 中导入 TypeScript 变量答案

【问题标题】：Import TypeScript variable in React在 React 中导入 TypeScript 变量
【发布时间】：2018-12-09 17:43:14
【问题描述】：

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

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

export declare const root = "root_15a7b352";

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

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

【问题讨论】：

【解决方案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'

【讨论】：

【解决方案2】：

Karol Majeswski's Answer 在从 typescript 导入变量时得到了正确的结果。

但是，您的意图似乎是使用styled-components 对下拉列表的部分进行样式设置，而不是从 scss 文件中导入此变量，Dropdown 组件提供了诸如ms-Dropdown-title 之类的可读类名，可用于样式设置。

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

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

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

【讨论】：

这正是我想要做的。但是有像“root_15a7b352”这样的类名，它们以某种方式编译/编译/生成，我需要它们。所以我需要在新的fabric-js版本上导入名称，否则下划线后的id可能不同，我的样式将不起作用。