在React中导入TypeScript变量

Question

I am trying to style (styled-components) a fabric js component (Dropdown) as a react component.

The css class names are declared in a file office-ui-fabric-react/lib/components/Dropdown/Dropdown.scss.d.ts. Example:

export declare const root = "root_15a7b352";

I want to import this class name so I can use it in styled.

AFAIK this is TypeScript global variable and I tried looking for information on how to get to it but with no success.

Answer 1

The statement declare const root is not the same as const root . It means:

There is a variable called root somewhere else, and I'm just here to describe it.

In other words, it tells us something on the type level, but it doesn't contain any executable code. It's not possible to consume it in runtime. You can verify it by inspecting the generated code in TypeScript playground .

Most likely it's meant to be imported from someplace else, or is, in fact, a global variable Since the declaration file describes Dropdown.scss , it's likely that root is a CSS class living in that file. Try:

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

Answer 2

Karol Majeswski's Answer gets it right on importing the variable from typescript.

However, it seems your intention is to style parts of the dropdown using styled-components , instead of importing this variable from scss file, the Dropdown component provides readable classnames like ms-Dropdown-title that can be used for styling.

For eg. to style the Dropdown, you would use:

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

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

See Codepen example