My App

CSS 模块

CSS 模块

在这个课程平台上,我有一个“Sidenote”组件,用于添加附带信息。你可能已经注意到了,它们看起来像这样:

sidenote-component

让我们构建这个组件的简化版本!

这是一个粗略的草图,就道具和标记而言:

function Sidenote({ title, children }) {
  return (
    <aside>
      <h3>{title}</h3>
      <p>{children}</p>
    </aside>
  );
}

这就是我们如何使用 CSS Modules 进行样式设置的:

import Sidenote from './components/Sidenote';

function App() {
  return (
    <>
      <Sidenote title="I'm a sidenote!">
        I contain some text!
      </Sidenote>
    </>
  );
}

export default App;

这里发生了很多奇怪的事情。我会准确解释这一切是如何运作的,但首先,我建议你花几分钟亲自试试!

例如,你认为 styles 导入的是什么?猜一下,然后通过 console.log(styles) 记录下来看看你是否正确。

在你稍微研究一下这个例子后,观看这个视频以获取深入的解释:

您可以在 Webpack “Tools of the Trade” 额外课程中了解更多关于 Webpack 的信息 👀。

命名“styles”导入

在一些 CSS Modules 的教程中,导入被命名为“classes”而不是“styles”:

import classes from "./Sidenote.module.css";

最终,这都是一样的。Webpack 将 CSS 模块视为“默认导出”,因此我们可以随便给它命名。

有关更多信息,请查看 JS 入门中的“JavaScript 模块”课程 👀。