我尝试将CSS模块的样式包含并应用到React组件。但是，样式永远不会应用，CSS也永远不会包含在内。
这是我到目前为止的代码：
./components/software.tsx
import styles from "./Toolbar.module.css";
export default function Toolbar({title = "Social Media App"}) {
return (
<div className={styles.toolbarContainer}>
<h1>{title}</h1>
</div>
)
}./components/software.module.css
.toolbar-container {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
background: grey;
}./app/layout.tsx
import type {Metadata} from 'next'
import {Inter} from 'next/font/google'
import React from "react";
import Toolbar from "@/components/Toolbar";
import Homepage from "@/app/page";
const inter = Inter({subsets: ['latin']})
export const metadata: Metadata = {
title: 'Some Social Media App',
description: 'Some new kind of social media outlet'
}
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<Toolbar title="Homepage" />
{children}</body>
</html>
)
}./app/page.tsx
import React from "react";
import Link from "next/link";
export default function Homepage() {
return (
<>
<p>Welcome to the homepage!</p>
<Link href={"/dashboard"}>Dashboard</Link>
</>
)
}为什么Toolbar.module.css的CSS没有包含在显示的页面中？
我试着把它放在不同的地方和不同的文件中。我还尝试将工具栏包含在layout.tsx文件本身中。但这也没用。
1条答案
按热度按时间r7knjye21#
1.：因为连字符在CSS文件中的类名中是有效的，但在JavaScript中分配给减法操作。
第二：CSS文件中的选择器和React组件中的引用必须相同！
这是有效的：
在React组件中：
<div className={styles.toolbarContainer}>在CSS文件中：
.toolbarContainer{ ... }这不起作用（两者都有效，但值不匹配）：
在React组件中：
<div className={styles.toolbarContainer}>有效在CSS文件中：
.toolbar-container{ ... }有效这也不起作用（在上面的第一点中解释）：
在React组件中：
<div className={styles.toolbar-container}>无效在CSS文件中：
.toolbar-container{ ... }有效