没有为 React App 加载 CSS 模块

Question

我是 React 新手，所以这可能是一个简单的错误。我无法在我的 React 应用程序上看到我的任何 CSS 样式。我不知道我是否必须启用 CSS 模块或其他任何东西。但是，我听说最近的 create-react-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";

然后你使用 inline 像这样附加类名

例子：

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

你的 css 类名不是对象，所以你不能这样称呼它。

相反，您只需像这样导入 css（确保 css 文件与 js 文件位于同一文件夹中，因为这里我们通过 ./ 调用文件）

例子：

 import "./BurgerIngredients.css";

并像在普通 html 中那样使用 className

例子：

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