title: Using Styled Components with nested styles for React Search Bar, trying to place two different SVGs at opposite sides of the search bar
body: <p>I have a Search Bar React component that I'm building using Styled Components. I have two separate SVGs I'm trying to add to the inside of the input but on separate sides.</p>
  
  <p>The first SVG is already positioned properly to show up on the left side of the search bar and is just a static SVG.</p>
  
  <p>The second is a Circle X/Close icon that I wrapped in a button in order to pass it a clear input onClick handler and I'm trying to place this icon on the right side of the Search Bar like this:</p>
  
  <pre><code>--------------------------
  |search              ⓧ |
  --------------------------
  </code></pre>
  
  <p>The issue I'm having is that both SVGs and my Input field are all styled as children of a parent <code>&lt;div&gt;</code> that passes down nested styles to the corresponding elements, and because of this both icons are overlapping each other on the left side.</p>
  
  <p>Because of this I have no idea how to separate the stylings for both SVGs so that can style them independently.</p>
  
  <p>I have a CodeSandbox here demonstrating the issue:</p>
  
  <p><a href="https://codesandbox.io/s/focused-water-feke2?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit focused-water-feke2"></a></p>
  
  <p>And here's my current component with styles:</p>
  
  <pre><code>import React, { useState } from "react";
  import styled from "styled-components";
  
  export const FilterTextbox = () =&gt; {
    const [text, setText] = useState("");
    const handleChange = (event: any) =&gt; {
      setText(event.target.value);
    };
    const clearInput = () =&gt; {
      setText('');
    };
  
    return (
      &lt;form&gt;
        &lt;StyledInput className={"inputWithIcon"}&gt;
          &lt;Input
            type="text"
            value={text}
            onChange={handleChange}
            placeholder="Search"
            onSubmit={e =&gt; {
              e.preventDefault();
            }}
          /&gt;
          &lt;svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="36px"
            height="36px"
          &gt;
            &lt;path d="M 13.261719 14.867188 L 15.742188 17.347656 C 15.363281 18.070313 15.324219 18.789063 15.722656 19.1875 L 20.25 23.714844 C 20.820313 24.285156 22.0625 23.972656 23.015625 23.015625 C 23.972656 22.058594 24.285156 20.820313 23.714844 20.25 L 19.191406 15.722656 C 18.789063 15.324219 18.070313 15.363281 17.347656 15.738281 L 14.867188 13.261719 Z M 8.5 0 C 3.804688 0 0 3.804688 0 8.5 C 0 13.195313 3.804688 17 8.5 17 C 13.195313 17 17 13.195313 17 8.5 C 17 3.804688 13.195313 0 8.5 0 Z M 8.5 15 C 4.910156 15 2 12.089844 2 8.5 C 2 4.910156 4.910156 2 8.5 2 C 12.089844 2 15 4.910156 15 8.5 C 15 12.089844 12.089844 15 8.5 15 Z" /&gt;
          &lt;/svg&gt;
  
          &lt;button onClick={clearInput} style={{ all: 'unset'}}&gt;
            &lt;svg  width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1"&gt;
              &lt;g id="surface1"&gt;
                &lt;path d="M 12 1.546875 C 6.203125 1.546875 1.5 6.25 1.5 12.046875 C 1.5 17.84375 6.203125 22.546875 12 22.546875 C 17.796875 22.546875 22.5 17.84375 22.5 12.046875 C 22.5 6.25 17.796875 1.546875 12 1.546875 Z M 17.078125 15.585938 C 17.148438 15.65625 17.183594 15.75 17.183594 15.847656 C 17.183594 15.945312 17.148438 16.046875 17.078125 16.109375 L 16.0625 17.128906 C 15.988281 17.203125 15.894531 17.234375 15.800781 17.234375 C 15.707031 17.234375 15.609375 17.199219 15.539062 17.128906 L 12 13.585938 L 8.464844 17.132812 C 8.394531 17.207031 8.296875 17.242188 8.203125 17.242188 C 8.109375 17.242188 8.011719 17.203125 7.941406 17.132812 L 6.929688 16.117188 C 6.859375 16.046875 6.820312 15.953125 6.820312 15.851562 C 6.820312 15.753906 6.859375 15.65625 6.929688 15.589844 L 10.476562 12.027344 L 6.917969 8.511719 C 6.773438 8.367188 6.773438 8.128906 6.917969 7.984375 L 7.929688 6.964844 C 8 6.894531 8.09375 6.859375 8.195312 6.859375 C 8.292969 6.859375 8.386719 6.894531 8.457031 6.964844 L 12.003906 10.46875 L 15.554688 6.964844 C 15.625 6.894531 15.71875 6.859375 15.816406 6.859375 C 15.914062 6.859375 16.007812 6.894531 16.078125 6.964844 L 17.089844 7.984375 C 17.234375 8.128906 17.234375 8.367188 17.089844 8.511719 L 13.53125 12.027344 Z M 17.078125 15.585938 "/&gt;
              &lt;/g&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
        &lt;/StyledInput&gt;
      &lt;/form&gt;
    );
  };
  
  const Input = styled.input`
    height: 50px;
    font-size: 25px;
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
    padding-left: 50px;
    cursor: pointer;
  
    :focus {
      border-color: dodgerBlue;
      box-shadow: 0 0 8px 0 dodgerBlue;
    }
  `;
  
  const StyledInput = styled.div`
    svg {
      position: absolute;
      left: 0;
      top: 8px;
      padding: 9px 8px;
      fill: black;
      transition: 0.3s;
    }
  
    input:focus + svg {
      fill: dodgerBlue;
    }
  
    &amp;.inputWithIcon {
      position: relative;
    }
  `;
  </code></pre>