时间戳

首页 > 解决方案 > 无法将焦点样式应用于样式化组件

css - 无法将焦点样式应用于样式化组件

问题描述

我正在尝试将焦点样式应用于文本输入，但无法应用相同的内容。我参考了其他问题并尝试输入大纲：无以覆盖用户样式表，但这没有任何效果。

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

标签： cssreactjsstyled-components

解决方案

&和之间有一个空格:focus。我将其更改为&:focus，它在沙盒上对我有用。

推荐阅读