SASS SCSS issue with input styles with react - css

Question

Apologies to everyone to this silly question but I am stuck. Maybe because it is late. I have this SCSS file:
.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 is a function included in utils.scss and it is not relevant. It just give scss vars in code.
I have this 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
this boils down to basic CSS. I know. The input does not get styled and if I put the input on the top level it does. I really cannot see what I am doing wrong. Can somebody lend me a hand and call me blind?
Many Thanks.

Answer 1

You have a typo in the class name of the internal div. It should be this.
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