html - 为什么我的 css 没有将样式应用于 React 组件？

Question

我对 react 还很陌生，我正在为我的 react 组件添加样式，以便它显示电影列表。我创建的 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>
  )
}

标签： htmlcssreactjswebpack

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