Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

helperClass and styled-components

See original GitHub issue

While 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:closed
  • Created 5 years ago
  • Reactions:4
  • Comments:9

github_iconTop GitHub Comments

justdanallencommented, Apr 7, 2019

@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.

import React, {Component} from 'react';
import {render} from 'react-dom';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';
import styled from 'styled-components'

const ListElement = styled.div`
  background-color: white;

  &.dragging-helper-class {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);

const SortableItem = SortableElement(({value}) => <ListElement>{value}</ListElement>);

const SortableList = SortableContainer(({items}) => {
  return (
      {, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />

class SortableComponent extends Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
  render() {
    return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;

render(<SortableComponent />, document.getElementById('root'));
justdanallencommented, Apr 5, 2019


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.


import './SortableComponent.css'
                shouldCancelStart={ () => this.props.lock ? true : false}
                pressDelay={ size==='small' ? 100 : 0}


.dragging-helper-class div {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  background-color: white;

.dragging-helper-class .shadow{
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);

.dragging-helper-class {
  list-style: none; 

It’s a bummer, but was the fastest way to get around it for now.

Read more comments on GitHub >

github_iconTop 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, 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found