Question

我的打字稿项目有问题。我已经用

创建了项目

create-react-app my-app --scripts-version=react-scripts-ts

创建安装后，我已经安装了类型

我的项目编译成功，但类名未呈现。

这是我的代码

    import * as React from "react";
    import InputGroup from "../../components/input-group";
    import Input from "../../components/input";
    import Form from "../../components/form";
    import Button from "../../components/button";
    import * as style from "./style.scss";
    import Icon from "../../components/icon";

    import { Link } from "react-router-dom";
    import AuthWell from "../../components/auth-well";

    const form = [
      {
        name: "Email",
        placeholder: "Email",
        label: "Email",
        input: (
          <InputGroup>
            <Icon type="email" />
            <Input id="Email" name="Email" placeholder="Email" />
          </InputGroup>
        )
      },
      {
        name: "Şifre",
        placeholder: "Şifre",
        label: "Şifre",
        input: (
          <InputGroup>
            <Icon type="password" />
            <Input id="Şifre" name="Şifre" placeholder="Şifre" />
          </InputGroup>
        )
      }
    ];

    export default class Login extends React.Component {
      render() {
        return (
          <div className={style.container}>
            <AuthWell>
              <div className={style.title}>Giriş</div>
              <Form settings={form} />
              <div className={style.forgot}>
                <Link to="login">Şifremi Unuttum</Link>
              </div>
              <Button primary block shadow>
                TAMAM
              </Button>
            </AuthWell>
          </div>
        );
      }
    }

输出

output

类名未呈现，其响应空白页我也不明白是怎么回事

这是scss文件

scss file

Answer 1

将您的类设置为字符串，它应该可以工作：

import './style.scss';
...
export default class Login extends React.Component {
  render() {
    return (
      <div className="container"}>
                     ^^^^^^^^^^^
        <AuthWell>
          <div className="title">Giriş</div>
                         ^^^^^^^
          ...
        </AuthWell>
      </div>
    );
  }
}

样式对象未使用打字稿以类名呈现

1 个答案: