Question

目前正在开发一个使用React和CSS模块的大型项目。我想在一堆列表项上实现'react-anything-sortable'。

到目前为止，实现已经停滞不前，因为'react-anything-sortable'将以下类添加到'react-anything-component'中的任何子类：.ui-sortable，.ui-sortable-item ,. ui-draggable和.ui-sortable-placeholder。我假设这些是为'react-anything-sortable'传递的类，以识别哪些DOM元素被拖动，放置等等。

我通过引用.scss文件来导入我的List组件的样式，如下所示：

import styles from './WidgetList.scss'

要在组件上使用样式，您需要添加styles.CLASS以使用类：

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

因此，可以理解的是，'react-anything-sortable'放置的.ui-sortable无法引用样式表，因为它没有添加.styles。

可以很容易地看到其他div元素如何具有'hashed'className（表示已经找到它们各自的css模块中的类），但是，具有ui-sortable的div只有类但无法访问.scss文件包含.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-sortable className，即您无法使用css模块，则可以将这些classNames导出为＆＃39; global＆＃39;类：

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

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

如果在同一个选择器中有全局和本地classNames的组合，您还可以将单个classNames指定为＆＃39; global＆＃39;：

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

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

1 个答案: