Scss classes not working in React, but standard HTML tags are

user_10129053 0
Viewed 1280

Any one know where I am going wrong? I have the latest version of node-scss installed via npm. I import my scss files as such import './loginform.module.scss';

This is an example component:

import React from 'react';
import './loginform.module.scss';

const LoginForm = (props) => {
    return (
        <div className='loginFormContainer'>
            <form className='loginForm'>
                <div className='loginFormUsermame'>
                    <label for='username'>Username</label>
                    <input
                        id='username'
                        type='text'
                        placeholder='Username'></input>
                </div>
            </form>
        </div>
    );
};

export default LoginForm;

It seems I am not getting any styles from my file. This is my .scss file

.loginFormContainer {
    width: 100%;
    max-width: 24rem;

    .loginForm {
        padding-left: 2rem;
        padding-top: 1.5rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
        margin-bottom: 1rem;
        background-color: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border-radius: 0.375rem;

        .loginFormUsername {
            display: block;
            color: #4a5568;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
    }
}

Any ideas? It seems to work in things with out classes such as p tag for example. I could make that massive via the scss file...but its my classes....

CodeSandBox: https://codesandbox.io/s/broken-shadow-n8517

reactjs sass
1 Answers

The issue is that .module.scss naming convention is reserved for css modules that work with scss also in create-react-app. So the styles are being exported as an object here and you'll have to destructure the classnames (or use as styles.<className> if not destructuring ). You'll have to use them like this

import React from "react";
import {
  loginFormContainer,
  loginForm,
  loginFormUsermame
} from "./login.module.scss";

/*
import styles from "./login.module.scss"
 //to use as styles.loginFormContainer
*/

const LoginForm = props => {
  return (
    <div className={loginFormContainer}>
      <form className={loginForm}>
        <div className={loginFormUsermame}>
          <label htmlFor="username">Username</label>
          <input id="username" type="text" placeholder="Username" />
        </div>
      </form>
    </div>
  );
};

export default LoginForm;

OR

Change the naming of the scss file to not include .module.scss like simply to login.scss or login-module.scss.

Hope this helps !

user_64831210
Related