Permintaan maaf kepada semua orang untuk pertanyaan konyol ini, tetapi saya terjebak. Mungkin karena sudah larut. Saya memiliki file SCSS ini:


.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 adalah fungsi yang termasuk dalam utils.scss dan tidak relevan. Itu hanya memberikan scss vars dalam kode.

Saya punya jsx ini:

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

Ini bermuara pada CSS dasar. Aku tahu. Input tidak ditata dan jika saya meletakkan input di tingkat atas, itu benar. Saya benar-benar tidak bisa melihat apa yang saya lakukan salah. Dapatkah seseorang membantu saya dan memanggil saya buta?

Terimakasih banyak.

0
Juanjo 26 Mei 2021, 02:37

1 menjawab

Jawaban Terbaik

Anda memiliki kesalahan ketik pada nama kelas div internal. Seharusnya ini.

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
1
Will Walsh 25 Mei 2021, 23:41