Импортировать переменную TypeScript в React

Question

Я пытаюсь стилизовать (styled-components) компонент ткани js (Dropdown) как компонент реагирования.

Имена классов css объявлены в файле office-ui-fabric-реагировать / lib /компоненты / Выпадающее / Dropdown.scss.d.ts.Пример:

export declare const root = "root_15a7b352";

Я хочу импортировать это имя класса, чтобы я мог использовать его в стиле.

AFAIK Это глобальная переменная TypeScript, и я попытался найти информацию о том, как к нему добратьсяно безуспешно.

Answer 1

Ответ Karol Majeswski дает право на импорт переменной из машинописного текста.

Однако, похоже, вы намерены стилизовать части раскрывающегося списка, используя styled-components, вместо импорта этой переменной из файла scss, компонент Dropdown предоставляет читаемые имена классов, такие как ms-Dropdown-title, которые можно использовать для стилизации.

Например.для стилизации выпадающего списка вы должны использовать:

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

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

См. пример Codepen

Answer 2

Оператор declare const root отличается от const root.Это означает:

Существует переменная с именем root где-то еще, и я здесь, чтобы описать ее.

Другими словами,он говорит нам что-то на уровне типа, но не содержит исполняемого кода.Это невозможно использовать во время выполнения.Вы можете проверить это, проверив сгенерированный код на TypeScript игровой площадке .

Скорее всего, он предназначен для импорта из другого места или фактически является глобальной переменной, так как файл объявления описываетDropdown.scss, вполне вероятно, что root - это класс CSS, живущий в этом файле.Попробуйте:

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