AuthForm.module.css
时间: 2024-05-07 13:23:49 浏览: 10
这是一个 CSS 模块文件,用于为身份验证表单组件提供样式。它可能包含类似以下的代码:
```
.container {
max-width: 400px;
margin: 0 auto;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
}
.input {
padding: 10px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
.button {
padding: 10px;
margin: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.button:hover {
background-color: #0062cc;
}
```
在 React 组件中使用 CSS 模块时,可以使用类似以下的方式导入和使用:
```
import styles from './AuthForm.module.css';
function AuthForm() {
return (
<div className={styles.container}>
<form className={styles.form}>
<input type="email" className={styles.input} placeholder="Email" />
<input type="password" className={styles.input} placeholder="Password" />
<button type="submit" className={styles.button}>Sign In</button>
</form>
</div>
);
}
```
这样做的好处是,每个 CSS 类名都会被自动转换为唯一的值,并且只在组件内部有效,避免了全局作用域的污染和命名冲突。