styles.btn，styles的字符串文字。active和styles.inactive將引發錯誤

我正在使用Vite，React，MUI，TypeScript

類型“string”上不存在屬性“btn”。ts(2339)任何 類型“string”上不存在屬性“active”。ts(2339)任何 類型“string”上不存在屬性“inactive”。ts(2339)任何

不太確定如何修復它，因為iv以前使用css選擇器類沒有任何問題

import styles from './Keyboard.css?inline';

<button
className={`${styles.btn} ${isActive ? styles.active : ''} ${isInactive ? styles.inactive : ''}`}
>
</button>

.btn {
    width: 100%;
    border: 3px solid black;
    background: none;
    aspect-ratio: 1 / 1;
    font-size: 2.5rem;
    text-transform: uppercase;
    padding: 0.5rem;
    font-weight: bold;
    cursor: pointer;
    color: black;
}

.btn.active {
    background-color: hsl(200, 100%, 50%);
    color: white;
}

.btn.inactive {
    opacity: 0.3;
}

.btn:hover:not(:disabled),
.btn:focus:not(:disabled) {
    background-color: hsl(200, 100%, 75%);
}

我試著在網上搜索這個問題，但似乎這個問題對于很多不同的應用程序來說都很模糊。因為我也使用MUI，所以我嘗試使用他們版本的按鈕，但這只是讓樣式變得有點復雜。