styled-components

Target another styled component on hover

旧街凉风 提交于 2019-11-27 09:39:46
问题 What is the best way to handle hovers in styled-components. I have a wrapping element that when hovered will reveal a button. I could implement some state on the component and toggle a property on hover but was wondering if there is a better way to do this with styled-cmponents. Something like the following doesn't work but would be ideal: 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:

styled-components is saying wrapped styled() around your React component (Component)

送分小仙女□ 提交于 2019-11-27 07:44:43
问题 I have my app in CodeSandbox using styled-component. Please refer the below url https://lrn6vmq297.sse.codesandbox.io/ Everytime I made some changes, the console is saying. Warning: Prop `className` did not match. It looks like you've wrapped styled() around your React component (Component), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component. and UI does not render as expected. Anyone has idea why I