Question

我使用带有React打字稿的样式化组件。我创建了一个theme.ts，在其中定义了我在ThemeProvider中使用的变量以将其公开给我的应用程序。另外，我还有一个styled.d.ts，在其中声明了我的DefaultTheme，用作Theme.ts的接口。

我创建了一个单独的文件。 media.ts，如本文所述，我在其中创建可重复使用的媒体查询：https://medium.com/@samuelresua/easy-media-queries-in-styled-components-690b78f50053，现在我想在主题中包含... media，以便可以将其与主题一起使用：

media.ts

import { css } from 'styled-components'

interface MediaQueryProps {
    [key: string]: any;
  }
const breakpoints:  MediaQueryProps = {
   xs: 480,
   sm: 768,
   md: 992,
   lg: 1200 
}

export default Object.keys(breakpoints).reduce((acc, label) => {
   acc[label] = (literals: TemplateStringsArray, ...placeholders: any[]) => css`
      @media (max-width: ${breakpoints[label]}px) {
         ${css(literals, ...placeholders)};
      }
   `.join("");
   return acc
}, {}  as Record<keyof typeof breakpoints, (l: TemplateStringsArray, ...p: any[])=> string>)

theme.ts

import { DefaultTheme } from 'styled-components'
import media from './media';

const theme: DefaultTheme = {
    primary: "#262646",
    secondary: "#F9FAFE",
    success: "#00897B",
    danger: "#B00020",
    text: "#263646", 
    background: "#E8EAF6",
    white: "#ffffff",
    fonts: ["sans-serif", "Roboto"],
    ...media,
    fontSizes: {
      small: "1em",
      medium: "1.2em",
    },
  }  
  export default theme;

styled.d.ts

// import original module declarations
import 'styled-components'

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    primary: string,
    secondary: string,
    success: string,
    danger: string,
    text: string, 
    background: string,
    white: string,
    fonts: Array<string>,
    fontSizes: {
      small: string,
      medium: string,
    },
  }
}

如果我尝试在App.ts中使用我的媒体查询，而不在DefaultTheme中包含... media，则会引发错误类型'DefaultTheme'.ts（2339）'上不存在'媒体'媒体'，

const TableRow = styled.tr`
    &:nth-of-type(odd){
        background: ${props => props.theme.secondary}
    }
    ${({theme}) => theme.media.sm`
        background: ${theme.secondary}
   `}
`

但如果我将其定义为以下内容，则会引发错误

declare module 'styled-components' {
  export interface DefaultTheme {
    media: Array<string>
  }
}

在theme.ts中抛出错误类型'{primary：string;类型中缺少'媒体'媒体'； secondary：字符串成功：字符串；危险文字：字串；背景：字符串；白色：字符串；字体：string []; fontSizes：{小：字符串；媒介：字符串； }; }”，但类型为“ DefaultTheme” .ts（2741）'

是必需的

我完全迷失了如何以正确的方式定义它的工作方式。当我将鼠标悬停在媒体上时，会收到以下信息，来自打字稿：

（别名）const media：记录字符串>

求助...

Answer 1

我认为您的问题是您定义了一个主题界面，但未定义从媒体导出的字段，但是您尝试在默认主题中使用它们，该主题是Them，没有媒体字段。

最简单的方法是定义界面中归档的媒体，键入any并将媒体查询放入媒体字段中。我不确定这是否对您有用，还是一个好习惯。对于这种类型的主题，我没有做很多工作，但是我认为类似的事情应该可以完成。

包括使用打字稿

1 个答案: