Шаблонные литералы в React для модулей bootstrap и css

Question

Привет, я хочу использовать bootstrap и css модули вместе в реакции, но у меня проблемы с пониманием как. Я думал, что мог бы использовать литералы шаблона для достижения этой цели.

Вот код ниже: Login.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, может кто-нибудь показать мне, как Я должен правильно использовать bootstrap и мои собственные пользовательские модули css вместе?

Мой Login.module. 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