CSS Модули не загружаются для приложения React

Question

Я новичок в React, так что это может быть простая ошибка. Мне не удается увидеть какой-либо из моих стилей CSS в моем приложении React. Я не знаю, нужно ли мне включать CSS модули или что-то еще. Однако я слышал, что эта функция включена в последние версии приложения create-response-app. Приветствуем любую помощь, спасибо!

Код ниже:

Burger. js

import React from "react";
import classes from "./Burger.css";
import BurgerIngredient from "./BurgerIngredients/BurgerIngredients";

const burger = (props) => {
    return (
        //type has to be string bc we implemented prop-type checking
        <div className={classes.Burger}>
            <BurgerIngredient type="bread-top"/>
            <BurgerIngredient type="cheese"/>
            <BurgerIngredient type="meat"/>
            <BurgerIngredient type="bread-bottom"/>
        </div>
    );
};

export default burger;

BurgerIngredients. js

import React, {Component} from "react";
import classes from "./BurgerIngredients.css";
import PropTypes from "prop-types"; //to see if props are of valid types

class BurgerIngredient extends Component {
    render() {
        let ingredient = null;

        switch(this.props.type) {
            case("bread-bottom"):
                ingredient = <div className={classes.BreadBottom}></div>;
                break;
            case("bread-top"):
                ingredient = (
                    <div className={classes.BreadTop}>
                        <div className={classes.Seeds1}></div>
                        <div className={classes.Seeds2}></div>
                    </div>
                );
                break;
            case("meat"):
                ingredient = <div className={classes.Meat}></div>;
                break;
            case("cheese"):
                ingredient = <div className={classes.Cheese}></div>;
                break;
            case("bacon"):
                ingredient = <div className={classes.Bacon}></div>;
                break;
            case("salad"):
                ingredient = <div className={classes.Salad}></div>;
                break;
            default:
                ingredient = null;
        }
        return ingredient;
    };
};

//check if prop is of valid string
BurgerIngredient.propTypes = {
    type: PropTypes.string.isRequired
};

export default BurgerIngredient;

BurgerIngredients. css

.BreadBottom {
    height: 13%;
    width: 80%;
    background: linear-gradient(#F08E4A, #e27b36);
    border-radius: 0 0 30px 30px;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
}

.BreadTop {
    height: 20%;
    width: 80%;
    background: linear-gradient(#bc581e, #e27b36);
    border-radius: 50% 50% 0 0;
    box-shadow: inset -15px 0 #c15711;
    margin: 2% auto;
    position: relative;
}

.Seeds1 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 30%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(-20deg);
    box-shadow: inset -2px -3px #c9c9c9;
}

.Seeds1:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: -170%;
    top: -260%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px 2px #c9c9c9;
  }
  
.Seeds1:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 180%;
    top: -50%;
    border-radius: 40%;
    transform: rotate(60deg);
    box-shadow: inset -1px -3px #c9c9c9;
  }

  .Seeds2 {
    width: 10%;
    height: 15%;
    position: absolute;
    background-color: white;
    left: 64%;
    top: 50%;
    border-radius: 40%;
    transform: rotate(10deg);
    box-shadow: inset -3px 0 #c9c9c9;
  }
  
  .Seeds2:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    left: 150%;
    top: -130%;
    border-radius: 40%;
    transform: rotate(90deg);
    box-shadow: inset 1px 3px #c9c9c9;
  }
  

.Meat {
    width: 80%;
    height: 8%;
    background: linear-gradient(#7f3608, #702e05);
    margin: 2% auto;
    border-radius: 15px;
}

.Cheese {
    width: 90%;
    height: 4.5%;
    margin: 2% auto;
    background: linear-gradient(#f4d004, #d6bb22);
    border-radius: 20px;
}

.Salad {
    width: 85%;
    height: 7%;
    margin: 2% auto;
    background: linear-gradient(#228c1d, #91ce50);
    border-radius: 20px;
}

.Bacon {
    width: 80%;
    height: 3%;
    background: linear-gradient(#bf3813, #c45e38);
    margin: 2% auto;
}

Так выглядит мое приложение

Я вижу компоненты BurgerIngredient на странице, но не вижу их стили. Стиль бургера должен быть между двумя текстами

Answer 1

Ошибка, которую вы здесь делаете, заключается в том, что вы вызываете свой css с именем

Пример:

import classes from "./BurgerIngredients.css";

И затем вы используете встроенный, чтобы добавить имя класса, как это

Пример:

 <div className={classes.Meat}></div>;

Имена классов css не являются объектами, поэтому вы не можете называть их так.

Вместо этого все, что вам нужно сделать, это просто импортировать css вот так (убедитесь, что файл css находится в той же папке, что и файл js, потому что здесь мы вызываем файл с помощью ./)

Пример:

 import "./BurgerIngredients.css";

И используйте className так же, как и в обычном html, вот так

Пример:

 <div className="BreadBottom"></div>;

Answer 2

Если вы намереваетесь создать модуль CSS, затем используйте его в своих компонентах для целей определения объема, в соответствии с CRA вы должны определить свои файлы CSS с расширением модуля .

Если вы не используете расширение .module для файлов таблицы стилей, вы должны импортировать их, как обычно, и вы также не можете задать для них область видимости.

Так что это будет примерно так :

import "./BurgerIngredients.css";
... // other parts of your component
render(){
  return <div className="BreadBottom"></div>;
}

Но , если вы хотите использовать модуль CSS и задать область для своих стилей, ваш файл таблицы стилей должен быть BurgerIngredients.module.css вместо BurgerIngredients.css, тогда вы можете импортировать его без каких-либо проблем с областью видимости, как и раньше.

import classes from "./BurgerIngredients.module.css";
... // other parts of your component
render(){
  return <div className={classes.BreadBottom}></div>;
}