Css 无法将焦点样式应用于已设置样式的组件

我试图将焦点样式应用于文本输入，但无法应用相同的样式。我提到了其他问题和 尝试加入大纲：none覆盖用户样式表，但没有任何效果

export const InputBox = styled.input`
  display: flex;
  width: 45%;
  height: 2em;
  margin-top: 1em;
  background: linear-gradient(
    360deg,
    #b0a7e6 0%,
    rgba(176, 167, 230, 0) 169.23%
  );
  border-radius: 5px;
  border: 2px solid lavender;
  color: #6e5dcc;
  & :focus {
outline:none
    border: 2px solid green;
  }
`;

---

在

&

和

：focus

之间有一个空格。我把它改成了

&:focus

，它在沙箱上对我很有效。

试试这个。它将在以下方面发挥作用：

export const InputBox = styled.input`
  /* This renders the input above... Edit  */
    display: flex;
  width: 45%;
  height: 2em;
  margin-top: 1em;
  background: linear-gradient(
    360deg,
    #b0a7e6 0%,
    rgba(176, 167, 230, 0) 169.23%
  );
  border-radius: 5px;
  border: 2px solid lavender;
  color: #6e5dcc;
  &:focus {
outline:none
    border: 2px solid green;
  } `}
`

render(
  <div>
<input name="name" type="text"/>
    <Button target="_blank" primary>click</Button>

  </div>
)

export const InputBox=styled.input`
/*这将呈现上面的输入。。。编辑*/
显示器：flex；
宽度：45%；
高度：2米；
边缘顶部：1米；
背景：线性梯度(
360度，
#b0a7e6 0%，
rgba（176167230,0）169.23%
);
边界半径：5px；
边框：2件纯色薰衣草；
颜色：#6e5dcc；
&：焦点{
大纲：无
边框：2倍纯绿；
} `}
`
渲染(
点击
)

您能在codesandbox上重现您的问题吗？我希望能够更改焦点上的边框样式。要点如下：

&:focus

，请将空格移到

&:focus

，非常感谢…几乎花了2个小时：-）没问题。有时我们会有这样的一天…：D@sgrmhdk别担心这会发生在每个人身上