从模块不响应css'；不适用（无网页）

我有一个react应用程序，它有几个模块。 对于一个模块，css或SCS不适用。 所有其他模块均应用SCS。我已经从css更改为scss，但不起作用。 我也试过用！在后台很重要，但在开发人员控制台中，SCS根本不会出现。没有找到类似SCS的文件

App.js

import React, {useEffect, useState} from 'react'
import './App.scss'
import EditView from "../editView/editView";



 return (
//some other html stuff
<div className="app_editContent">
                            <EditView action={actionToPerform}/>
                        </div>
)

---

其他scss模块的构建方式相同，但它们确实有效。

我在发布后不久就找到了答案。如果使用类名，则需要在{}中定义它，如：

---

className={styles.edit_container}

你自己解决得很好！

import React from 'react';
import './editView.module.scss';
import {faSave, faStopCircle, faSun} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";


export default class EditView extends React.Component {


    constructor(props) {
        super(props);
    }


    showTitle() {
        return (
            this.props.action === "new" ? (
                [
                    <div className="edit_container">
                        <div className="edit_newListTitle">Neue Shoppingliste erstellen</div>
                        <label className="edit_titleInputLabel">Titel</label>
                        <input type="text" className="edit_titleInput" name="title"></input>
                        <label className="edit_locationInputLabel">Ort</label>
                        <input type="text" className="edit_locationInput" id="location" value=""></input>
                        <label className="edit_priorityInputLabel">Wichtigkeit</label>
                        <input className="edit_priorityInput" type="range" id="priority"
                               min="1" max="5" step="1"></input>
                        <label className="edit_toDoDateInputLabel">Erledigen bis</label>
                        <input className="edit_toDoDateInput" type="datetime-local" id="date"></input>
                        <input className="edit_amountInput" type="number" id="quantity" name="quantity" min="1"
                               value="1"></input>
                        <input className="edit_itemInputLabel" type="text" id="item" value=""></input>
                        <button className="edit_buttonSave"><FontAwesomeIcon icon={faSave}/></button>
                        <button className="edit_buttonCancel"><FontAwesomeIcon icon={faStopCircle}/></button>
                    </div>
                ]
            ) : this.props.action === "edit" ? (
                <div>edit</div>
            ) : (
                <div>nothing to show</div>
            )
        )
    }

    actionToPerformChange = (val) => {
        this.setState({actionToPerform: val});
        this.forceUpdate()
    }


    render() {
        return (<div>
                <button onClick={() => this.actionToPerformChange('new')}>Create new Shoppinglist</button>
                <button onClick={() => this.actionToPerformChange('edit')}>Edit Shoppinglist</button>
                {this.showTitle()}
            </div>
        )
    }
}

.edit_container {
    height: 100%;
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto;
    background: yellow !important;
}