React项目表单label和input无法显示（控制台无报错）求助

表单不渲染、控制台无报错是3个非React逻辑层面的低级错误导致的：

• 样式文件后缀错误：组件内导入的是./Form.module.css，但实际样式文件命名为Form.module.js，CSS模块无法被正确解析加载，所有关联样式全部失效。
• CSS Modules类名未绑定：样式文件内定义了.input、.label类，但JSX里的<label>、<input>标签没有设置对应的className属性，样式不会自动匹配标签生效。
• 定位基准缺失：label设置了position: absolute绝对定位，但父级容器.Form没有设置position: relative，label会直接相对于页面根节点偏移，跑到可视区域外。

1. 修正样式文件命名 #

将现有样式文件Form.module.js重命名为Form.module.css，保证和组件内的导入路径一致。

2. 补全Form容器基础样式 #

在Form.module.css内补充外层容器的定位、边距样式，修正后完整样式代码如下：

.Form {
  position: relative;
  width: fit-content;
  margin: 80px auto 0;
}
.input{
  outline: none;
  padding: 16px 22px;
  border: 1px solid #dadce0;
  font-size:18px;
  border-radius:5px;
}
.input:focus{
  border: 2px solid royalblue;
}
.label{
  color: #8d8d8d;
  position: absolute;
  top: 27px;
  left: 55px;
  background: #ffffff;
  transition: 300ms;
  transform: translate(-50%, -50%);
}

3. 给表单元素绑定样式类 #

修改Form.js的渲染逻辑，给label、input标签绑定对应的CSS Modules类名，修正后完整组件代码：

import React, { Component } from 'react';
import classes from './Form.module.css';

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  handleUsernameChange = (event) => {
    this.setState({
      username: event.target.value
    });
  };

  render() {
    return (
      <div className={classes.Form}>
        <label className={classes.label}>Username</label>
        <input
          className={classes.input}
          type="text"
          value={this.state.username}
          onChange={this.handleUsernameChange}
        />
      </div>
    );
  }
}

export default Form;

修改完成后刷新页面，表单标签、输入框即可正常展示，输入内容的状态绑定也会正常运行，不会产生控制台报错。

CSS Modules不会自动将样式匹配给同名HTML标签，所有样式类必须显式绑定到元素的className属性上才能生效。

内容的提问来源于stack exchange，提问作者Lizzy