当我只在一个 sass 文件中更改样式时，它会在所有其他样式文件中更改

Question

我有一个问题让我慢了很多，我必须做出 3 个屏幕来做出反应，并且在三个屏幕中有一个进度条，所以我决定创建该栏作为道具（没有 css 只是为了更改 colors和条形）该站点有 3 个“注册”“提案”和“订阅”屏幕，每个屏幕都有其样式组件，但是当我更改其中一个进度条的样式时，它也会将相同的样式应用于另一个屏幕，即使我没有导入任何东西

function 道具

export default function Step(props) {
  return (
    <div className={"stepBlock" + (props.selected ? " selected" : "")}>
      <div className="circleWrapper" onClick={() => props.updateStep(props.index + 1)}>
        <div className="circle">{props.index + 1}</div>
      </div>
      <span>{props.label}</span>
    </div>
  )
}

HTML(注册)

const labelArray = ['Cadastro', 'Proposta', 'Assinatura']
const [currentStep, updateCurrentStep] = useState(1);

function updateStep(step) {
  updateCurrentStep(step);
}

CSS

.circle 
  height: 53px
  width: 53px
  margin: -13px 0px 0px 10px
  background-color: #fff
  border: 2px solid #5E7278
  line-height: 65px
  font-family: "Roboto"
  color: rgb(97, 120, 123)
  font-size: 25px
  border-radius: 50%
  text-align: center
  margin-left: 60px
  cursor: pointer
  -moz-background-clip: padding-box
  -webkit-background-clip: padding-box
  background-clip: padding-box
}

我发送了简化的代码以便更好地阅读，当我更改“.circle”中的某些样式时，它会在所有组件中更改，即使我只更改“registration.sass”