Реагируйте на Typescript, ссылаясь на атрибуты css, такие как active и hover

Question

Я пытаюсь решить, как установить активный атрибут, используя реагировать и набирать текст с помощью файла css.d.ts.

Мой css (LinkItem.css)

.LinkItem {

    margin: 0;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    align-items: center;

}

.LinkItem a {
    color: red;
    text-decoration: none;
    height: 100%;
    padding: 16px 10px;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    display: block;
}

.LinkItem a:hover,
.LinkItem a:active,
.LinkItem a:active {
    background-color: darksalmon;
    border-bottom: darksalmon;
    color: white;
}

мой LinkItem.css.d.ts

export const LinkItem: string;

мой LinkItem.tsx

import * as React from 'react';
import * as Style from './LinkItem.css'


const linkItem = (props: any) => (
    <li className={Style.LinkItem}>
        <a
            href={props.link}
            className={props.active ? Style.LinkItem["a.active"] : undefined}
        >
            {props.children}
            </a></li>
);


export default linkItem;

Моя проблема с этой строкой className={props.active? Style.LinkItem["a.active"]: undefined}

Все, что я хочу сделать, это установить активный стиль из моего css-файла, если active пропущен как опора, но я не могу понять, как ссылаться на него!

я пытался

Style.LinkItem

Style.LinkItem [ "активный"]

Style.LinkItem [ "a.active"]

Как установить активный класс?