React中用于引导程序和css模块的模板文本

Question

嗨，我想在react中一起使用bootstrap和css模块，但我很难理解如何使用。我想我可以使用模板文字来达到这个目的。

下面是代码：登录.tsx

import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles.background-color-main} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}

这在className中给了我一个错误，有人能告诉我如何正确地将引导程序和我自己的自定义css模块一起使用吗？

我的登录模块.css在这里：

.background-color-main {
background-color: #87BFFF;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}

Answer 1

这里的问题出现在属性名称background-color-main中，因为您使用了-大小写。您应该通过LoginStyles["background-color-main"]访问该属性。

这是修正后的代码

import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles["background-color-main"]} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}

我在这里更新了相同的工作代码codesandbox