CSS 模块

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

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

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

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 的信息 👀。

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