reactjs - Scss 类在 React 中不起作用，但标准 HTML 标签可以

Question

有人知道我哪里错了吗？我通过 npm 安装了最新版本的 node-scss。我这样导入我的 scss 文件 import './loginform.module.scss';

这是一个示例组件:

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;

我似乎没有从我的文件中获取任何样式。这是我的 .scss 文件

.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;
        }
    }
}

有什么想法吗？它似乎适用于没有类的东西，例如 p 标签。我可以通过 scss 文件使它变得庞大……但它是我的类(class)……

代码沙盒:https://codesandbox.io/s/broken-shadow-n8517

Answer 1

问题是 .module.scss命名约定保留给 css modules与 scss 一起工作也在 create-react-app 中。因此，样式在这里作为对象导出，您必须解构类名(如果不解构，则使用 styles.<className>)。你必须像这样使用它们

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;

或

将 scss 文件的命名更改为不包含 .module.scss就像简单地login.scss或 login-module.scss .

希望对您有所帮助!