0

I've a react app, which has several modules. For one module, the css or scss doesn't apply. all other modules does apply the scss. I've changed already from css to scss but doesn't work. I've tried also to use !importent at the background, but in the developer console, the scss doesnt appear at all. Like scss is not found.

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>
)

EditView.js

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>
        )
    }
}

editView.module.scss

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

The other scss modules are build the same way but they do work.

1 Answer 1

1

I've found the answer shortly after posting. If using classNames need to define it in {} like : className={styles.edit_container}

Sign up to request clarification or add additional context in comments.

1 Comment

Good job solving it yourself!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.