reactjs - Có thể chuyển đổi một danh sách biến sass đã xuất sang kiểu hợp nhất TypeScript không (NextJs/React)

Tôi đang cố gắng xuất một danh sách các màu từ tệp .scss và sử dụng tên biến làm danh sách các kiểu hợp nhất trong TypeScript. Điều này để nếu tôi thêm một màu mới trong tệp scss, nó sẽ tự động cập nhật các kiểu - yêu cầu ít công việc bảo trì hơn. Cách triển khai hiện tại như sau:

// _colors.module.scss
$azure: #0070C0 ;
$white: #FFFFFF ;

:export {
  azure: $azure;
  white: $bianca;
}

Tôi đang tạo một component sẽ sử dụng các màu này làm kiểu prop trong NextJs, với TypeScript, hoạt động theo cách như sau:

//Typography.tsx

// imports colours as object
import colors from 'styles/_colors.module.scss'

type Color = keyof typeof colors;

interface TypographyProps {
  color?: Color;
  // expect the above to be equivalent to 
  // color?: 'azure' | 'white';
}

const getStyles = (color: Color) => {
  const styles: {color?: string} = {}
  styles.color = color ? colors[color] : undefined
  return styles
}

function Typography({ children, color='azure' }: TypographyProps) {
   return (
      <p
         style={getStyles(color)}
      >
      </p>
   )
}

Màu sắc hoạt động như mong đợi về mặt phong cách, tuy nhiên việc tích hợp TypeScript thì không.

Nếu tôi khai báo một đối tượng màu trong cùng một file (hoặc trong JS và import nó), nó hoạt động như mong đợi:

(JSX attribute) TypographyProps.color?: "white" | "azure" | undefined

Nhưng khi nhập từ SCSS tôi nhận được như sau:

(JSX attribute) TypographyProps.color?: string | number | symbol | undefined

Vui lòng cho tôi biết nếu cần thêm thông tin.