javascript - 无法在反应应用程序中导入多个 CSS 文件

Question

我正在尝试导入以导入不同的 css 文件，用于反应应用程序中的不同元素。但它不是进口的。我做错什么了？

食谱.js

import React from "react";
import style from "style.modules.css";

const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1>{title}</h1>
      <ol>
        {ingredients.map((ingredient) => (
          <li>{ingredient.text}</li>
        ))}
      </ol>
      <p>Calories={calories}</p>
      <img className={style.image} src={image} alt=''></img>
    </div>
  );
};

export default Recipe;

样式.modules.css

.recipe{
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgb(71, 71, 71);
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: white;
    align-items: center;
    min-width: 40%;
}

.image{
    border-radius: 50%;
    width:  100px;
    height: 100px;
}

我希望它看起来像什么，

我得到了什么，

标签： javascriptcssreactjsreact-hooksuse-effect

Answer 1

css 文件名很重要，它应该是 [name].module.css。

import React from "react";
import style from "./style.module.css";

有一个codeandbox供参考。

详细信息在：
https ://create-react-app.dev/docs/adding-a-css-modules-stylesheet/