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 文件来制作这么大的文件……但它是我的类……

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

Answer 1

问题是 .module.scss 命名约定是为 css modules 保留的，在 create-react-app 中也可以与 scss 一起使用。所以样式在这里被导出为一个对象，你必须解构类名（或者使用 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。

希望这会有所帮助！