Reactjs 如何使用Typescript键入样式化组件而不丢失任何道具？

我不熟悉样式化组件，我希望能够正确地键入样式化组件，这样当我传递道具“vs code”时，我可以自动检测我拥有的所有道具，而不仅仅是主题中的道具或我可以在界面中放置的道具

有没有办法不使用HOC，就像我在其他网站上看到的那样？是否有可能获得一个通用道具，以便在所有情况下使用，而不必像示例中那样在该样式的每个属性中进行定义

app.theme.ts

导航栏.styled.component.ts

提前感谢,， 最佳

出于某种原因（可能是由于

样式化组件

的typescript定义的编写方式），如果删除一个嵌套级别，则

主题

的键入工作正常。此代码段类型检查没有错误（v4），即typescript知道

primaryColor

是一个

字符串

：

const主题={
原色：'#FF5018'，
第二种颜色：“#252729”，
三色：“#1A1C1E”，
textColor:'白色'，
};
主题类型=主题类型；
类型道具=主题和{
//…其他钥匙
}
const NavigationBarStyled=styled.div`
网格区域：导航栏项；
左：2rem；
显示器：flex；
对齐项目：居中；
颜色：${props=>props.primaryColor}；
背景色：${props=>props.primaryColor}；
`;

正如@Huy Nguyen所说，可以解决这个问题，但实际上，样式化组件的属性会丢失，或者必须多次定义相同的属性

因此，最好的选择是，正如Styled Components网站所说的（定义主题界面）：

theme.ts

styled-components.ts

只需传递链接：

---

非常感谢大家。

我们采用了另一种方式。
注意：带有React Native的样式化组件v5

• 定义你的主题类型

  //MyTheme.ts
  导出类型MyTheme={
  颜色：{
  主：字符串；
  背景：字符串；
  };
  };
  

• 在主题上使用该类型

  //themes.ts
  导出常量LightTheme:MyTheme={
  颜色：{
  小学：“白色”，
  背景：“白色”，
  },
  };
  导出常量暗模式：神话模式={
  颜色：{
  初级：“灰色”，
  背景：“黑色”，
  },
  };
  

• 用于将MyTheme类型“合并”到样式化组件默认主题中

  //styled.d.ts
  导入“样式化组件”；
  从“../src/themes/MyTheme”导入{MyTheme}；
  声明模块“样式化组件”{
  //eslint禁用下一行@typescript eslint/无空接口
  导出接口DefaultTheme扩展MyTheme{}
  }
  

好的，酷。

主题

道具键入正确。
组件本身呢

• 将特定组件道具包装在

  StyledProps

  类型中

  从“样式化组件”导入{StyledProps}；
  从“样式化组件/本机”导入样式化；
  键入MyViewProps=StyledProps；
  const MyView=styled.View(
  （道具：MyViewProps）=>`
  背景色：${props.backgroundColor | | props.theme.colors.background}；
  颜色：${props.isAlert？红色：props.theme.colors.primary}
  `,
  );
  

---

在本例中，

props.backgroundColor

和

props.theme.colors.background

将自动完成。当您更新MyTheme类型或特定组件类型时，它应该可以正常工作 我不知道这是不是最好的方法。但我找到了一个解决办法如下

// theme.ts
const theme = {
  colors: {
     ...
  }
};
export type themeTypes = typeof theme;
export default theme;


// styled.d.ts ( in root folder )
import 'styled-components'
import { themeTypes } from '@/styles/theme'

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends themeTypes {}
}

---

您好@Huy Nguyen，谢谢您的回答，但是通过这个道具的实现，您不会丢失关于样式化组件或响应的其他属性吗？因为你减少了简单地拥有主题属性或你输入或不输入的自定义属性的可能性？而且。。。是否可以一次调用附件以全部使用？提前谢谢！我发誓这种方法一直对我有效。但是我正在从事的当前项目中的某些内容是不同的，我在

props

上看到的类型是

any

。唯一不同的是我使用的是

styledcomponentsMeProvider

。你知道我为什么要买道具吗？

export const NavigationBarStyled = styled.div`
  grid-area: navigation-bar-item;
  padding-left: 2rem;
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.palette.primaryColor};
  background-color: ${({ theme }) => theme.palette.primaryColor};
`;

export default interface ThemeInterface {
  primaryColor: string;
  primaryColorInverted: string;
}

import * as styledComponents from "styled-components";

import ThemeInterface from "./theme";

const {
  default: styled,
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ThemeInterface>;

export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;

import styled from 'app/styled-components';

// theme is now fully typed
const Title = styled.h1`
  color: ${props => props.theme.primaryColor};
`;

// theme.ts
const theme = {
  colors: {
     ...
  }
};
export type themeTypes = typeof theme;
export default theme;


// styled.d.ts ( in root folder )
import 'styled-components'
import { themeTypes } from '@/styles/theme'

declare module 'styled-components' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface DefaultTheme extends themeTypes {}
}