在React中导入TypeScript变量

Question

我正在尝试将一个结构js组件(Dropdown(作为react组件进行样式化(样式化组件(。

css类名是在文件办公室ui fabric react/lib/components/Dropdown/Dropdown.css.d.ts中声明的。示例：

export declare const root = "root_15a7b352";

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

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

Answer 1

语句declare const root与const root不同。意思是：

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

换句话说，它在类型级别上告诉我们一些东西，但它不包含任何可执行代码。不可能在运行时使用它。您可以通过在TypeScript游乐场中检查生成的代码来验证它。

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

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

Answer 2

Karol Majewski的Answer在从typescript导入变量时做得很好。

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

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

const StyledDropdown = styled(Dropdown)`
color: red;
& .ms-Dropdown-title {
background-color: red;
}
`;

参见Codepen示例