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 文件使其变得如此庞大......但它是我的课程......

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

Answer 1

问题是.module.scss命名约定是为create-react-appcss modules中的工作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。

希望这可以帮助 ！