React Componentは、インポートされたCSSモジュールのために認識されないclassNamesを追加します

Question

現在、ReactとCSSモジュールを使用する大きなプロジェクトで作業しています。私は、リスト項目の束に「何でも並べ替える」反応を実装したいと思います。

'react-anything-sortable'は 'react-anything-component'内のすべての子に次のクラスを追加するので、これまで実装が停止していました：.ui-sortable、.ui-sortable-item、 .ui-draggableと.ui-sortable-プレースホルダー。これらは、どのDOM要素がドラッグ、配置されているのかを認識するために '反応するもの - ソート可能'のために渡されるクラスであると仮定します。

.scssファイルを参照して、

import styles from './WidgetList.scss' 

コンポーネントにスタイルを使用するには、クラスを使用するstyles.CLASSを追加する必要があります。

<div className={styles.container}>Something</div> 

したがって、それは.ui-ソート可能ビーイング「の反応によって置かれていることは理解です-anything-sortable 'はスタイルシートを参照する方法がないため.stylesを追加しないでください。

一つやすく、DIV要素は「ハッシュ化されたが」className（それぞれのCSSモジュールでクラスを示すが発見されている）持っているか、他の見ることができますが、とdivのUI-ソート可能な唯一のクラスが、方法はあり.ui-sortableのスタイルプロパティを含む.scssファイルにアクセスする方法

これを修正するにはどうすればよいですか？

EDIT：、あなたがui-sortableクラス名を制御することはできません場合は

import React from 'react'; 
import ThinScrollbar from 'components/Scrollbars/ThinScrollbar'; 
import PureComponent from '../PureComponent'; 

import Sortable from 'react-anything-sortable'; 
import { sortable } from 'react-anything-sortable'; 
import styles from './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 to its own component <WidgetItem/> 
     const widgetItems = items.map(i => { 
      return (
       <WidgetListItem className="vertical" sortData={i} key={i}> //<--- this is where .ui-sortable-item is 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"> //<--- this is where .ui-sortable is 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; 
} 

Answer 1

：ここで私はそれを

WidgetList.jsを実装しています方法ですつまり、代わりにそれらのclassNamesを「グローバル」クラスとしてエクスポートできるCSSモジュールを使用することはできません：

/* Will be hashed */ 
.activeCheckbox { 
    background-position: 0 -20px; 
} 

/* Will be left as 'ui-sortable' */ 
:global .ui-sortable { 
    display: block; 
} 

あなたが同じセレクタにグローバルとローカルクラス名の組み合わせを持っている場合は、また、「グローバル」として個々のクラス名を指定することができます。

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