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

Question

Hi I'm learning React and for practice I'm passing from simple html page to react component, I'm using react style component to apply the styles.

In my classic css style sheet I have these rules for a input element:

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

I translated that rules in my react component like:

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

that works as i expected. My problem is that I don't know how i can traslate this specific rule:

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

I found this in the documentation but honestly, I don't understand it

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

I tried something like:

&:focus + &Icon{

}

But this did not work

Answer 1

You can use the styled Icon inside Input using ${Icon}:

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

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

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