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

内特兰吉特·博尔戈汉

我正在尝试为 react 应用程序中的不同元素导入不同的 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;
}

我想要的样子, 在此处输入图片说明

我得到的, 在此处输入图片说明

克里斯·黄

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

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

有一个codesandbox供参考。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

导入CSS文件并在create-react-app应用程序中反应组件?

将 css 文件导入特定组件 react 应用程序

通过iOS11文件应用程序在应用程序中导入多个文件

应用程序的基础无法加载js和CSS文件

无法在Angular 6应用程序中加载css文件

无法在dash应用程序中加载静态css文件

在SCSS文件中导入常规CSS文件?

在Android应用程序中导入文本文件?

在NodeJS应用程序中导入文件的问题`

在应用程序中导入本地库和文件

使用TypeScript在节点应用程序中导入JSON文件

无法在反应中导入 bootstrap.css

无法从目录中导入 jsx 文件,反应

ReactJS:将CSS导入一个文件会更改整个应用程序的样式

在同构React组件中导入CSS文件

在React组件中导入分割的CSS文件

视图无法导入 CSS 文件

AWS Lambda python多个文件应用程序无法从另一个导入

Django无法在404页面上从应用程序应用CSS文件

Django无法在404页面上从应用程序应用CSS文件

无法在 TINYMCE_DEFAULT_CONFIG = { 'content_css': 中导入我自己的 css 文件

Python。无法从文件中导入多个函数

如何在Ember应用程序中输出多个CSS文件

为什么从文件中导入的 python 文件调用函数后 PyQt 应用程序停止响应?

SAPUI5应用程序无法在ABAP存储库中加载CSS文件

为什么我的Flask应用程序无法连接到我的CSS文件?

如何从共享组件文件夹导入不同的应用程序?反应 / 反应原生

如何在rails应用程序中的tailwind css中导入font-awesome

编辑:如何在React应用程序中导入MP3文件