タグ付けされた質問 「styled-components」

スタイル付きコンポーネントでホバーを処理するための最良の方法は何ですか。カーソルを合わせるとボタンが表示されるラッピング要素があります。 コンポーネントにいくつかの状態を実装し、ホバー時にプロパティを切り替えることはできましたが、styled-cmponentsでこれを行うためのより良い方法があるかどうか疑問に思いました。 次のようなものは機能しませんが、理想的です。 const Wrapper = styled.div` border-radius: 0.25rem; overflow: hidden; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25); &:not(:last-child) { margin-bottom: 2rem; } &:hover { .button { display: none; } } `

83 reactjs  styled-components 

私はこの投稿をフォローしています：https : //medium.com/@samuelresua/easy-media-queries-in-styled-components-690b78f50053 Typescriptで次のコードを作成しましたが、必要any以上に入力を行わなければなりませんでした。 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; …

8 typescript  styled-components