带有反应的输入样式的 SASS SCSS 问题

Question

向大家道歉这个愚蠢的问题，但我被困住了。可能是因为晚了。我有这个 SCSS 文件：

.login {
  &__base {
    height: 400px;
    width: 520px;
  }

  &__container {
    @include center;

    input {
      background-color: get-color(base-div);
      border: 1px solid get-color(border-div);
      border-radius: 3px;
      color: get-color(text-color);
      font-size: 18px;
      font-weight: 100;
    }
  }
}

get-color 是 utils.scss 中包含的一个函数，它不相关。它只是在代码中提供 scss 变量。

我有这个 jsx：

import React from "react"
import "./login.scss"
import {FormattedMessage} from "react-intl"

function Login({loginhandler}) {
  return (
    <div className="login__base wm-card">
      <div className="login_container">
        <h2><FormattedMessage id="SignIn"/></h2>
        <input type="email" name="username"/>
      </div>
    </div>
  )
}

export default Login

这归结为基本的 CSS。我知道。输入没有样式化，如果我将输入放在顶层它会。我真的看不出我做错了什么。有人能帮我一把，骂我瞎了吗？

非常感谢。

Answer 1

您在内部 div 的类名中有错字。应该是这个。

import React from "react"
import "./login.scss"
import {FormattedMessage} from "react-intl"

function Login({loginhandler}) {
  return (
    <div className="login__base wm-card">
      <div className="login__container"> // <--- double underscore needed here
        <h2><FormattedMessage id="SignIn"/></h2>
        <input type="email" id="username"/>
      </div>
    </div>
  )
}

export default Login