TypeScript Styled-Components Theme 属性返回未定义

Question

我在我的 React 应用程序中添加了一个主题，但是当我尝试在我的组件上设置属性时它不起作用。我试图记录props.theme.red 的结果并返回undefined。我试图寻找答案，但没有找到任何答案。你能帮帮我吗？

styled.d.ts

// import original module declarations
import "styled-components";

// import custom theme
import theme from "../utils/theme";

// extend the module declarations using custom theme type
type Theme = typeof theme;

declare module "styled-components" {
  export interface DefaultTheme extends Theme {}
}

theme.tsx

const theme = {
  red: "#ff0000",
} as const;

export default theme;

App.tsx

const MyHeading = styled.h1`
  color: ${(props) => props.theme.red};
`;

const App = () => {
  return <MyHeading>Heading</MyHeading>;
};

Answer 1

const App = () => {
  return <MyHeading theme={theme}>Heading</MyHeading>;
};

我想你错过了theme