内联样式与Componet上下文中的className

Question

你好，我试着理解在这种情况下什么时候需要使用inline style而不是className。我花了很长时间来解决翻译问题。一开始我想用className翻译组件，但这不起作用。这很奇怪，因为在我看来，发生这种事是没有原因的。所以我觉得我的代码有问题，但是。。。我还没有找到。所以我用inline style完成了翻译。奇迹，这很好。

我的问题是为什么？

工作良好

export function Content() {
return (
<div style={{transform: 'translateY(100px)'}}>
<Test/>
<Footer />
</div>)
}

不工作

export function Content() {
return (
<div className={container_content}>
<Test/>
<Footer />
</div>
)
}

css

.container_content {
transform: translateY(100px);
}

Nota bene：问题不在于方法。在我的jsx中使用className必须是这样的：

import { container_content } from "./test.module.css";

和下一个

<div className={container_content}><div>

所以这部分代码很好，问题似乎来自其他地方。。。

Answer 1

实际情况是，当您使用内联样式时，您正在传递一个包含该组件样式的对象。使用className时，需要为要使用的类传递一个字符串。现在您正在传递一个变量名。这些作品中的任何一个：

<div className={"container_content"}>

或

<div className="container_content">

如果你在普通html中思考它，你会做

<div class="container_content">

编辑：如果您有更新的问题，您应该只导入带有以下内容的css文件：

import "./test.module.css"

然后使用我提到的解决方案。

Answer 2

在js文件中，您需要导入类似的CSS文件

导入"css文件目录；；

，然后您可以将组件中的CSS类引用为字符串

示例：

className="container_content"