Ich folge diesem Beitrag: https://medium.com/@samuelresua/easy-media-queries-in-styled-components-690b78f50053
Ich habe Folgendes in Typescript erstellt, musste aber auf any
mehr tippen als ich muss, da bin ich mir sicher:
const breakpoints: ObjectMap<number> = {
small: 767,
medium: 992,
large: 1200,
extraLarge: 1240
};
export const media = Object.keys(breakpoints).reduce((acc: { [key: string]: (...args: any) => any }, label) => {
acc[label] = (...args) => css`
@media (min-width: ${breakpoints[label]}px) {
${css(...args as [any])};
}
`;
return acc;
}, {});
Daher habe ich keine Hilfe in meiner IDE, wenn ich Stile in meine Medienabfrageblöcke schreibe:
styled.button<Props>`
background: red; /* this must be a valid style */
${({ theme }) => theme.media.large`
background: blue;
foo: bar; /* this isn't caught */
`
Weiß jemand, wie ich meine media
Funktion verbessern kann?
quelle
Wenn ich es richtig verstehe, willst du es loswerden
any
.So geht's:
quelle