包括对带有 typescript 的样式化组件主题的媒体查询

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 以便我可以将它与我的主题一起使用：

媒体.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>)

主题.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 中抛出错误 '{主要：字符串;类型中缺少'属性'媒体'次要：字符串；成功：字符串；危险：字符串；文本：字符串；背景：字符串；白色：字符串；字体：字符串[]；字体大小：{小：字符串；介质：字符串； }; }' 但在类型 'DefaultTheme'.ts(2741)' 中是必需的

我完全不知道如何以正确的方式定义它以使其工作。 当我将鼠标悬停在媒体上时，我会收到以下信息表单打字稿：

（别名）常量媒体：记录字符串>

请帮助...

Answer 1

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

最简单的方法是在您的界面中定义一个媒体字段，输入任何内容并将媒体查询放在媒体字段中。我不确定这是否适合您，或者这是否是一个好习惯。我在这种类型的主题方面工作不多，但我认为这样的事情应该可以完成。