将HTML模板CSS转换适配React项目时出现语法错误如何修复

报错由两类不兼容问题直接导致：

• 你复制的样式代码是SCSS/Sass预处理器语法，原生CSS不支持&嵌套选择器、//单行注释这类Sass专属语法，解析阶段会直接抛出语法错误。
• 你写的JSX不符合React语法规范，两个核心属性名写错，会触发编译报错。

1. 样式代码适配 #

如果你的项目没有配置Sass/SCSS预处理器，把嵌套语法展开为原生CSS支持的平铺写法，同时把单行注释替换为CSS标准的块注释即可，修正后的完整CSS代码如下：

.slide-up {
  display: inline-block;
  width: 215px;
  padding: 10px 0 10px 15px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: #377D6A;
  background: #efefef;
  border: 0;
  border-radius: 3px;
  outline: 0;
  text-indent: 80px; 
  transition: all .3s ease-in-out;
}

.slide-up::-webkit-input-placeholder {
  color: #efefef;
  text-indent: 0;
  font-weight: 300;
}

.slide-up + label {
  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, .4);
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
}

.slide-up + label:before,
.slide-up + label:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;
}

.slide-up + label:before {
  /* 窄边效果 */
  top: 6px;
  left: 5px;
  right: 5px;
  bottom: 6px;
  background: #377D6A; /* 可替换为#134A46调整深色效果 */
}

.slide-up + label:after {
  top: 0;
  bottom: 0;
  background: #377D6A;
}

span:nth-child(1) .slide-up {
  text-indent: 105px;
}

span:nth-child(3) .slide-up {
  text-indent: 125px;
}

span:nth-child(1) .slide-up:focus,
span:nth-child(1) .slide-up:active,
span:nth-child(3) .slide-up:focus,
span:nth-child(3) .slide-up:active {
  text-indent: 0;
}

.slide-up:focus,
.slide-up:active {
  color: #377D6A;
  text-indent: 0;
  background: #fff;
}

.slide-up:focus::-webkit-input-placeholder,
.slide-up:active::-webkit-input-placeholder {
  color: #aaa;
}

.slide-up:focus + label,
.slide-up:active + label {
  transform: translateY(-100%);
}

.slide-up:focus + label:before,
.slide-up:active + label:before {
  border-radius: 5px;
}

.slide-up:focus + label:after,
.slide-up:active + label:after {
  transform: translateY(100%);
}

如果项目已经配置了Sass预处理器，不需要展开嵌套，只需要把样式文件后缀从.css改成.scss即可直接使用原嵌套代码。

2. JSX语法修正 #

React JSX的属性需要使用驼峰命名，同时要避开JS保留关键字，你写的两个属性需要修改：

• 全小写的classname改为驼峰写法className
• 标签的for属性改为htmlFor（for是JS循环关键字，不能直接作为属性名）

修正后的JSX代码如下：

<span>
  <input
    className="slide-up"
    id="card"
    type="text"
    placeholder="Fund me!"
  />
  <label htmlFor="card">Credit Card</label>
</span>

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