时间戳

首页 > 解决方案 > 如何使用 className 在 reactjs 中更改 html 的外观？

javascript - 如何使用 className 在 reactjs 中更改 html 的外观？

问题描述

我目前正在从 youtube 教程中学习 ReactJS，并尝试使用 className 来使页面看起来更好。我正在关注的教程仅添加： className="card">在 div 元素的开始标记中，它改变了页面外观，尽管它似乎对我不起作用。如果这是一个愚蠢的问题，请原谅我，因为我不知道您是否必须导入自己的 css 文件来更改外观，而教程只是没有显示它。我将不胜感激。谢谢你。

标签： javascriptcssreactjs

解决方案

您需要了解 CSS（级联样式表）（：可以为 HTML 元素赋予这样的类

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">content</div>
</body>
</html>

如果您有一个样式表（以 .css 结尾的文件包含在<head>您的文档中

/* styles.css */ 
.card {
    background-color: red;
}

类部分中描述的样式.card将应用于您的 html 元素（在本例中为红色背景）

您可能错过了教程中有关包含一些预先创建的样式表的步骤。

CSS 基础

推荐阅读