CODEWITHSUNDEEP
cssreactjssass
Juanjo
Juanjo

Reputation: 734

SASS SCSS issue with input styles with react

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.

Upvotes: 0

Views: 152

Answers (1)

Will Walsh
Will Walsh

Reputation: 2054

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

Upvotes: 1

Related Questions