Css问题-样式化组件（在next.js应用程序中）

有人能给我解释一下为什么我的

大纲不起作用：/

width: 92%;
margin: 0 auto;
margin-top: 2rem;

overflow: hidden;

input{

    width: 100%;

    font-size: 1.7rem;
    font-weight: 200;

    border: 1.3px solid rgba(200, 200, 200);
    border-radius: .45rem;

    padding: 1.5rem 1rem;

   &:focus{
    outline: 1.4px solid #1877f2;
 }    

}

结果


如果我让默认设置起作用，但当我将其样式设置为“无”时，它就不起作用了，我检查了google dev stools，我的代码看起来不错，但仍然不起作用：/

如果我把背景红放在焦距内，它会工作，但轮廓不工作

帮助我：/
如果您提供[最小、可复制的示例]（），我们可以。。。您也可以尝试
&:focus{outline:none；border:1.4px solid 35; 1877f2；}
如果不是CSS，请添加适当的标记（less/sass）