helperClass and styled-components
See original GitHub issueWhile using react-sortable-hoc
I have to import a .css file with only a class to be passed to the helperClass
prop in an otherwise css-file-free project using styled-components
. In the API I couldn’t find if a draggable element is dynamically assigned a prop (like isDragging
or something similar) which I could use to dynamically update css.
Any suggestion on how I could avoid importing that .css file?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:9
Top Results From Across the Web
API Reference - styled-components
A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class...
Read more >utility classes in styled component react - Stack Overflow
One of the best solutions is to use https://styled-system.com/, it plays well with Styled Components and other libraries like Emotion and it ...
Read more >Demystifying styled-components - Josh W Comeau
styled -components comes with a collection of helper methods, ... We inject a new CSS class into the page, using that hashed string...
Read more >How to Control Class Names in Styled Components
styled -components is a popular library to style React applications. It is widely adopted by React projects. We have shown how to control...
Read more >Complete Guide On How To Use Styled-components In React
Setting up variables like sizes, colors, font families has been a great help in following a style guide for projects in CSS. The...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@JRMaitre Thank you for chiming in! I must have been trying to apply it to the container… when applied to the actual List Element in SortableElement, it works! Not sure what I was thinking.
Just for anyone else here is the full example based on the example in the Readme.
@cmateusmoraes
The suggestion by @JRMaitre no longer works. I couldn’t add more specificity in a styled-component, like he suggested because it is no longer rendered in the same parent container. I eventually just imported the css file, with a css class, which I was trying to avoid.
SortableComponent.js
SortableComponent.css
It’s a bummer, but was the fastest way to get around it for now.