включая медиа-запросы к стилизованным компонентам темы с машинописью

Question

Я использую стилизованные компоненты с машинописью React. Я создал theme.ts, где я определяю свои переменные, которые я использую в своем ThemeProvider, чтобы представить их моему приложению. Кроме того, у меня есть styled.d.ts, где я объявляю свою DefaultTheme, которую я использую в качестве интерфейса для theme.ts.

Я создал отдельный файл. media.ts, где я создаю мультимедийные запросы многократного использования, как описано в этой статье: https://medium.com/@samuelresua / easy-media-query-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>)

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, не включая ... media в 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. Свойство 'media' отсутствует в типе '{primary: string ; вторичный: строка; успех: строка; опасность: строка; текст: строка; фон: строка; белый: строка; шрифты: строка []; fontSizes: {small: string; средний: строка; }; } 'но требуется в типе' DefaultTheme'.ts (2741) '

Я совершенно заблудился о том, как правильно определить его, чтобы он работал. при наведении курсора на носитель я получаю следующую информационную машинопись:

(псевдоним) const media: строка записи>

help pliz ...

Answer 1

Я думаю, что ваша проблема в том, что вы определили интерфейс темы, в котором вы не определили поля, экспортируемые из мультимедиа, но вы пытаетесь использовать их в теме по умолчанию, типом которой является Them, у которой нет полей мультимедиа ,

Самый простой способ - определить медиа, хранящиеся в вашем интерфейсе, ввести любой и поместить медиазапросы в поле медиа. Я не уверен, что это работает для вас или это хорошая практика. Я не очень много работал с этим типом тем, но я думаю, что что-то подобное должно сделать эту работу.