title: How to control other component's css in react?
body: <p>When I focus on the input tag in React, I want to create an animation where the dot at the center under the input tag called <code>inputBottomEffect</code> spreads out on oth sides.
  I don't know how to touch the css of <code>inputBottomEffect</code> when the input tag is in focus...</p>
  <hr />
  <p>sample code :</p>
  <pre><code>    &lt;inputWrapper&gt;
          &lt;input type=&quot;text&quot; ... /&gt;
          &lt;inputBottomDiv&gt;&lt;/inputBottomDiv&gt;
          &lt;inputBottomEffect&gt;&lt;/inputBottomEffect&gt; // input's bottom border
      &lt;/inputWrapper&gt;
  </code></pre>
  <hr />
  <p>screenshot :</p>
  <p><a href="https://i.stack.imgur.com/UumEB.png" rel="nofollow noreferrer">before</a></p>
  <p><a href="https://i.stack.imgur.com/fYx3d.png" rel="nofollow noreferrer">spreading</a></p>
  <p><a href="https://i.stack.imgur.com/AWVk3.png" rel="nofollow noreferrer">after</a></p>