我尝试将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{ ... }
有效