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

TypeScript样式化组件主题属性返回未定义

1 个答案: