React Component添加了由于导入css模块而无法识别的类名称

Question

目前正在进行一个使用React和CSS模块的大型项目。我想在一堆列表项上实现“反应-任何东西-排序”。

到目前为止，由于“react anything sortable”将以下类添加到“react anything component”中的任何子级，因此实现陷于停顿状态：。ui可排序。ui可排序项。用户界面拖拉和。ui可排序占位符。我假设这些类是为“react anythis sortable”传递的，以识别哪些DOM元素正在被拖动、放置等。

我通过参照导入列表组件的样式。像这样的scss文件：

import styles from './WidgetList.scss'

若要在零部件上使用样式，需要添加样式。类来使用类：

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

因此，这是可以理解的。由“react anything sortable”放置的ui sortable无法引用样式表，因为它不会添加。风格。

我该如何解决这个问题？

编辑：下面是我如何实现它的

WidgetList。js:

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

如果您无法控制ui可排序的className，即您不能使用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;
}