Question

我对反应还很陌生，并且在我的反应组件中添加了样式，以便显示电影列表。导入后，我创建的CSS文件未加载到应用程序中。在这一点上，它仅适用于内联样式，我宁愿不这样做。有人知道为什么这不起作用吗？

Movies.css:

.MoviesContainer {
  display: "flex";
  justify-content: "space-evenly";
  flex-wrap: "wrap";
}

import "./Movies.css"

const Movies = () => {
 return (
    <div>
      <Search onChange={(value) => setInput(value)} />
      <div className="MoviesContainer">
        <Film list={movies}/>
      </div>
    </div>
  )
}

Answer 1

此问题是由语法错误引起的，该语法错误是将属性的值包含在“引号”中。

Movies.css:

.MoviesContainer {
  display: "flex";
  justify-content: "space-evenly";
  flex-wrap: "wrap";
}

应该是：

Movies.css:

.MoviesContainer {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

Answer 2

您的类名称在CSS文件中为'MoviesContainer'，在js文件中为'MovieContainer'。

如果您修复该问题并导入文件css文件，它应该可以工作。

为什么我的CSS不将样式应用于React组件？

2 个答案: