如何用打字稿和打字稿解决情感问题

Question

我正在尝试创建带有情感的标记，但它不起作用，我相信是因为打字稿，因为在 javascript 文件中它可以工作。有人知道怎么解决吗？

我的主题：

import '@emotion/react';

export const palette = {
  common: {
    black: '000',
    white: 'fff'
  }

我的组件：

    import styled from '@emotion/styled';
    
    import { theme } from '../../utils/theme';    
         

      export const button = styled.button`
           background: ${({ theme }) => theme.pallete.common.black};
        `;

错误：

Property 'pallete' does not exist on type 'object'

Answer 1

你好像有错别字

Property 'pallete' does not exist on type 'object'

虽然名字是palette

尝试修改名称

Answer 2

您好，您可以像这样键入您的组件。

interface Pallete {
 common: {
   black: '#000'
 }
}
export const button = styled.button<{ pallete: Pallete }>`
  background: ${({ pallete }) => pallete.common.black};
`;