javascript - React Component adds classNames which aren't recognized because of imported css modules -

currently working on large project uses react , css modules. want implement 'react-anything-sortable' on bunch of list items.

so far implementation has gone standstill because 'react-anything-sortable' adds following classes child inside 'react-anything-component': .ui-sortable, .ui-sortable-item, .ui-draggable , .ui-sortable-placeholder. assume these classes passed 'react-anything-sortable' recognize dom elements being dragged, placed, etc.

i import list component's styles referencing .scss file so:

import styles './widgetlist.scss' 

to use styles on component, need add styles.class use class:

<div classname={styles.container}>something</div> 

therefore, it's understandable .ui-sortable being placed 'react-anything-sortable' has no way of referencing stylesheet since doesn't add .styles.

1 can see how other div elements have 'hashed' classname (indicating class in respective css modules have been found), however, div ui-sortable has class no way of accessing .scss file containing style properties of .ui-sortable

how fix this?

edit: here's how i'm implementing it

widgetlist.js:

import react 'react'; import thinscrollbar 'components/scrollbars/thinscrollbar'; import purecomponent '../purecomponent';  import sortable 'react-anything-sortable'; import { sortable } 'react-anything-sortable'; import styles './widgetlist.scss';  @sortable class widgetlistitem extends purecomponent {     render() {         return (             <div {...this.props}>                 {this.props.children}             </div>         )     } }  export default class widgetlist extends purecomponent {     constructor() {         super();         this.state = {};     }      handlesort(data) {         this.setstate({             result: data.join(' ')         });         console.log(this.state.result)     }      togglecheckbox(evt) {         console.log(evt)     }      render() {         let items = [1,2,3,4,5,6]         // todo: move widget creation own component <widgetitem/>         const widgetitems = items.map(i => {             return (                 <widgetlistitem classname="vertical" sortdata={i} key={i}> //<--- .ui-sortable-item added on render                     <div classname={styles.item} i={i}>                         <i classname={styles.fa}></i>{`widget ${i}`}                         <div classname={styles.checkbox} onclick={this.togglecheckbox}></div>                     </div>                 </widgetlistitem>             )         })         return <div classname={styles.container}>             <thinscrollbar>                 <sortable onsort={::this.handlesort} classname="vertical-container" direction="vertical"> //<--- .ui-sortable added on render                     {widgetitems}                 </sortable>             </thinscrollbar>         </div>     } } 

widgetlist.scss

@import "../../theme/variables";  .container {     width: 100%;     height: calc((100% - 335px) / 2);     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     user-select: none;     padding: 0 4px 0 10px; }  .item {     border-left: 5px solid #46484c;     background-color: #303236;     padding: 8px;     min-height: 36px;     font-size: 12px;     line-height: normal;     cursor: pointer;     margin-bottom: 5px;     margin-right: 15px; }  .item:hover {     background-color: #34363b; }  .item:last-of-type {     margin-bottom: 0; }  .fa {     display: inline-block;     font: normal normal normal 14px/1 fontawesome;     font-size: inherit;     text-rendering: auto;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;     color: #b7b7b7;     margin-right: 8px; }  .fa:before {     content: '\f07b'; }  .checkbox {     width: 20px;     height: 20px;     float: right;     background: url('img/checkboxes.gif') 0 0 no-repeat; }  .activecheckbox {     composes: checkbox;     background-position: 0 -20; }  .ui-sortable {     display: block;     position: relative;     overflow: visible;     -webkit-user-select: none;     -moz-user-select: none;     user-select: none; }  .ui-sortable:before, .ui-sortable:after {     content: " ";     display: table; }  .ui-sortable:after {     clear: both; }  .ui-sortable .ui-sortable-item {     float: left;     cursor: move; }  .ui-sortable .ui-sortable-item.ui-sortable-dragging {     position: absolute;     z-index: 1688; }  .ui-sortable .ui-sortable-placeholder {     display: none; }  .ui-sortable .ui-sortable-placeholder.visible {     display: block;     z-index: -1; }  .vertical-container {     width: 200px;     height:500px;     padding: 10px;     border: 1px #ccc solid;     background-color: red; }  .vertical.ui-sortable-item {     float: none;     display: block;     width: 100%;     padding: 10px 5px;     margin-bottom: 10px;     border: 1px #eee solid;     background-color: red; } 

if have no control on ui-sortable classname, i.e. can't use css modules can instead export classnames 'global' classes:

/* hashed */ .activecheckbox {     background-position: 0 -20px; }  /* left 'ui-sortable' */ :global .ui-sortable {     display: block; } 

if have combination of global , local classnames in same selector can specify individual classnames 'global':

/* 'ui-sortable' left 'ui-sortable', 'bar' hashed */ :global(.ui-sortable) .bar {     display: block; }