CSS Modules

CSS 模块

本文档仅在使用 Classic Remix 编译器 时才相关。如果您使用 Remix Vite，则 Vite 内置了对 CSS 模块的支持。

要使用内置的 CSS 模块支持，首先确保您已在应用程序中设置了 CSS 捆绑。

然后，您可以通过 .module.css 文件名约定选择加入 CSS 模块。例如：

app/components/button/styles.module.css

.root {
  border: solid 1px;
  background: white;
  color: #454545;
}

app/components/button/index.js

import styles from "./styles.module.css";

export const Button = React.forwardRef(
  ({ children, ...props }, ref) => {
    return (
      <button
        {...props}
        ref={ref}
        className={styles.root}
      />
    );
  }
);
Button.displayName = "Button";