有人知道我哪里错了吗?我通过 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)……
最佳答案
问题是 .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
.
希望对您有所帮助!
关于reactjs - Scss 类在 React 中不起作用,但标准 HTML 标签可以,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62628198/