如何在Reactjs中创建stepper？

Question

我试图在Reactjs中创建stepper，但在应用css属性时，它在css属性的span中抛出错误

我想创建多步骤表单，所以我想创建stepper Code Link

下面是css代码

$md-blue-500: #2196f3;

.stepper-number {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  position: relative;
  text-align: center;
  z-index: 1;
  border: 2px solid grey;
  background-color: white;
  color: grey;

  span:after {
    width: 999em;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 40px;
    background-color: #e8e8e8;
    content: "";
  }

  span:first-child {
    &:after {
      left: 50%;
    }
  }

  span:last-child {
    &:after {
      right: 50%;
      left: auto;
    }
  }

  &.active {
    border: 2px solid $md-blue-500;
    color: white;
    background-color: $md-blue-500;
  }
}

Answer 1

看起来您正在尝试在一个普通的.css文件中而不是在.scss中使用sass。这就是文件有错误的原因。