如何更改<h1>反应引导程序列的字体大小？

Question

我正在导入一个css文件(app.css(来设置<h1>字体的样式。以下是我的app.css文件中的内容：

.h1 {
font-size: 100px !important;
}

这是我试图呈现的react引导程序列。它在页面上呈现，但h1的字体大小没有改变。

import React from "react";
import "../App.css";
import { Container, Row, Col } from "react-bootstrap";
function HowItWorks() {
return (
<Container className="text-center HowItWorks">
<Row className="mt-5">
<Col xs={12} md={4}>
<h1>Create Account</h1>
</Col>
</Row>
</Container>
);
}
export default HowItWorks;

Answer 1

尝试使用内联JSX样式的对象。注意驼色案例：

<h1 style={{ fontSize: "5rem" }}>Create Account</h1>

Answer 2

当您在某个东西之前使用.时，它是一个类选择器，因此样式应用于具有类h1而不是h1标记的元素。

所以你的选择器应该如下选择h1元素

h1 {
font-size: 100px !important;
}