Javascript 使用带有嵌套样式的样式化组件作为搜索栏，尝试将两个不同的SVG放置在搜索栏的两侧

我有一个搜索栏组件，我正在使用样式化组件构建它。我有两个独立的SVG，我正试图添加到输入的内部，但在不同的侧面

第一个SVG已经正确定位，显示在搜索栏的左侧，它只是一个静态SVG

第二个是圆形X/Close图标，我将其包装在一个按钮中，以便向其传递一个清晰的input onClick处理程序，我尝试将此图标放置在搜索栏的右侧，如下所示：

--------------------------
|Just think of 
StyledInput
 as the container with having a left icon and button at right side with an icon and style those. IMO, The actual 
input
 should only focus on itself and the container should determine the style of others ( excluding the focus obviously which is dependent on the input ).
You can do something like this : 


https://codesandbox.io/s/broken-shadow-c5wxp


import React, { useState } from "react";
import styled from "styled-components";

export const FilterTextbox = () => {
  const [text, setText] = useState("");
  const handleChange = (event: any) => {
    setText(event.target.value);
  };
  const clearInput = () => {
    setText("");
  };

  return (
    <form>
      <StyledInput className={"inputWithIcon"}>
        <Input
          type="text"
          value={text}
          onChange={handleChange}
          placeholder="Search"
          onSubmit={e => {
            e.preventDefault();
          }}
        />
        <div className="left-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="36px"
            height="36px"
          >
            <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" />
          </svg>
        </div>

        <button className="right-icon" onClick={clearInput}>
          <svg width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
            <g id="surface1">
              <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 " />
            </g>
          </svg>
        </button>
      </StyledInput>
    </form>
  );
};

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

  :focus + .left-icon{
    svg{
      fill: dodgerBlue;
    }
  }

`;

const StyledInput = styled.div`
  &.inputWithIcon {
    position: relative;
  }

  .left-icon {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    svg {
      fill: black;
      transition: 0.3s;
    }
  }

  button.right-icon {
    background:none;
    border:none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    svg {
      fill: black;
      transition: 0.3s;
    }
  }
`;

--------------------------
| 只要把
StyledInput
想象成一个容器，它有一个左边的图标，右边有一个按钮，上面有一个图标和样式。在我看来，实际的
输入
应该只关注自身，容器应该确定其他容器的样式（不包括明显依赖于输入的焦点）。
您可以这样做：


import React，{useState}来自“React”；
从“样式化组件”导入样式化；
导出常量过滤器文本框=（）=>{
const[text，setText]=useState（“”）；
const handleChange=（事件：any）=>{
setText（event.target.value）；
};
常量clearInput=（）=>{
setText（“”）；
};
返回(
{
e、 预防默认值（）；
}}
/>
);
};
常量输入=styled.Input`
高度：50px；
字体大小：25px；
宽度：100%；
边框：2倍实心#aaa；
边界半径：4px；
利润率：8px0；
大纲：无；
填充：8px；
框大小：边框框；
过渡：0.3s；
左侧填充：50px；
光标：指针；
&：焦点{
边框颜色：淡蓝色；
盒影：0 0 8px 0道奇蓝；
}
：焦点+。左图标{
svg{
填充：道奇蓝；
}
}
`;
常量StyledInput=styled.div`
&.inputWithIcon{
位置：相对位置；
}
.左图标{
位置：绝对位置；
左：5px；
最高：50%；
转化：translateY（-50%）；
svg{
填充：黑色；
过渡：0.3s；
}
}
按钮。右图标{
背景：无；
边界：无；
位置：绝对位置；
右：5px；
最高：50%；
转化：translateY（-50%）；
svg{
填充：黑色；
过渡：0.3s；
}
}
`;

希望这有帮助
 StyledInput样式中的svg样式也会影响按钮中的svg，用
&>



从“React”导入React，{useState}；
从“样式化组件”导入样式化；
导出常量过滤器文本框=（）=>{
const[text，setText]=useState（“”）；
const handleChange=（事件：any）=>{
setText（event.target.value）；
};
常量clearInput=（）=>{
setText（“”）；
};
返回(
{
e、 预防默认值（）；
}}
/>
);
};
常量输入=styled.Input`
高度：50px；
字体大小：25px；
宽度：100%；
边框：2倍实心#aaa；
边界半径：4px；
利润率：8px0；
大纲：无；
填充：8px；
框大小：边框框；
过渡：0.3s；
左侧填充：50px；
：焦点{
边框颜色：淡蓝色；
盒影：0 0 8px 0道奇蓝；
}
`;
常量StyledInput=styled.div`
位置：相对位置；
&>svg{
位置：绝对位置；
左：0；
顶部：8px；
填充：9px 8px；
填充：黑色；
过渡：0.3s；
}
输入：focus+svg{
填充：道奇蓝；
}
钮扣{
位置：绝对位置；
右：0；
顶部：8px；
排名：0；
背景色：透明；
顶部：16px；
边界：无；
}
&.inputWithIcon{
位置：相对位置；
}
`;
@Josh哈哈。不用担心：）

import React, { useState } from "react";
import styled from "styled-components";

export const FilterTextbox = () => {
  const [text, setText] = useState("");
  const handleChange = (event: any) => {
    setText(event.target.value);
  };
  const clearInput = () => {
    setText("");
  };
  return (
    <form>
      <StyledInput className={"inputWithIcon"}>
        <Input
          type="text"
          value={text}
          onChange={handleChange}
          placeholder="Search"
          onSubmit={e => {
            e.preventDefault();
          }}
        />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width="36px"
          height="36px"
        >
          <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" />
        </svg>
        <button onClick={clearInput}>
          <svg width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
            <g id="surface1">
              <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 " />
            </g>
          </svg>
        </button>
      </StyledInput>
    </form>
  );
};

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;

  :focus {
    border-color: dodgerBlue;
    box-shadow: 0 0 8px 0 dodgerBlue;
  }
`;

const StyledInput = styled.div`
  position: relative;
  & > svg {
    position: absolute;
    left: 0;
    top: 8px;
    padding: 9px 8px;
    fill: black;
    transition: 0.3s;
  }

  input:focus + svg {
    fill: dodgerBlue;
  }
  button {
    position: absolute;
    right: 0;
    top: 8px;
    top: 0;
    background-color: transparent;
    top: 16px;
    border: none;
  }

  &.inputWithIcon {
    position: relative;
  }
`;