title: How to switch component showing with React and CSS?
body: <p>I have a composed page with multiple components. Like the picture, I want to show Component B inside Component A. By default, when clicking on A, hide B and show C in the middle. After clicking again, it toggles to show B and hide C.</p>
  <p>When C has been showing, also change the A's border color.</p>
  <p><a href="https://i.stack.imgur.com/rDM2P.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rDM2P.jpg" alt="enter image description here" /></a></p>
  <pre><code>import React from &quot;react&quot;;
  import styled, { css } from &quot;styled-components&quot;;
  
  import {
    ComponentA,
    ComponentB,
    ComponentC,
  } from &quot;~/components&quot;;
  
  export const NewComponent: React.FC = ({
  }) =&gt; {
    return (
      &lt;&gt;
        &lt;ComponentA&gt;
          &lt;ComponentB&gt;B&lt;/ComponentB&gt;
          &lt;ComponentC&gt;C&lt;/ComponentC&gt;
        &lt;/ComponentA&gt;
      &lt;/&gt;
    );
  };
  
  const ComponentA = styled()`
    ${({ theme }) =&gt; css`
      &amp;:active {
        border-color: green;
        bordor: 1px solid;
      }
    `}
  `;
  </code></pre>
  <p>I tried to use CSS to control the border color, it works with <code>background-color</code> but does not work for <code>border-color</code>. Also, I'm not sure if CSS can control the showing between Component B and component C.</p>