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

Question

有人可以向我解释为什么我outline的不工作：/？

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;
 }    

}

结果

如果我让它默认它工作，但是当我把它的样式设置为无时，它不起作用，我检查谷歌开发凳，我的代码看起来很好，但它仍然不起作用：/

如果我将背景红色放在焦点内，它会起作用，但轮廓不会

帮我 ：/

标签： cssnext.jsstyled-components