翻译一个经典的 css 样式表以响应样式化组件的使用 + 选择器

Question

嗨，我正在学习 React，为了练习，我正在从简单的 html 页面传递到 React 组件，我正在使用 React 样式组件来应用样式。

在我的经典 css 风格中 sheet 我对输入元素有以下规则：

.input100 {
  font-family: Poppins-Medium;
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::after {
  content: attr(data-symbol);
  font-family: Material-Design-Iconic-Font;
  color: #adadad;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: calc(100% - 20px);
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-top: 3px;
}

我在我的 React 组件中翻译了这些规则，例如：

const Input = styled.input`
  font-family: Poppins-Medium;
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
  border: none;
  outline: none;
  margin: 0;
`;

const Icon = styled.span`
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  &:after {
    content: attr(data-symbol);
    font-family: Material-Design-Iconic-Font;
    color: #adadad;
    font-size: 22px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: calc(100% - 20px);
    bottom: 0;
    left: 0;
    padding-left: 13px;
    padding-top: 3px;
  }
  &:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #7f7f7f;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
`;

如我所料。我的问题是我不知道如何翻译这个特定规则：

.input100:focus + .focus-input100::after {
  color: #a64bf4;
}

我在文档中找到了这个，但老实说，我不明白

& + & {
    background: lime; // <Thing> next to <Thing>
  }

我试过类似的方法：

&:focus + &Icon{

}

但这没有用

Answer 1

您可以使用 Input 中的样式 Icon 使用 ${Icon}:

const Icon = styled.span`
  position: absolute;
  // ...
`;

const Input = styled.input`
  font-family: Poppins-Medium;
  // ...

  &:focus + ${Icon}::after {
   color: #a64bf4;
  }
`;

翻译一个经典的 css 样式表以响应样式化组件的使用 + 选择器

translate a classic css stylesheet to react styled-component use + selector

css

css-selectors

reactjs

styled-components