[英]Trying to apply :focus styling to a nested SVG inside of styled component
我有一个简单的搜索栏 React 组件。
该组件是一个<div>
包装一个<input>
元素和一个<svg>
并通过 Styled Components 应用 styles。 我已经阅读了有关 Styled Components 的文档,但似乎找不到一种方法来应用:在本例中将 styles 聚焦到嵌套的子元素上是我的<svg>
。
Expected behavior: The SVG should turn blue when the input is in:focus
Current behavior: The SVG color stays black no matter if the input is in:focus or not
我在这里有一个 CodePen 显示:focus styles 可用于输入,但不能用于<svg>
和我当前的组件:
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);
};
return (
<StyledInput className={"inputWithIcon"}>
<Input
type="text"
value={text}
onChange={handleChange}
placeholder="Search"
/>
<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>
</StyledInput>
);
};
const Input = styled.input`
height: 50px;
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;
font-size: 25px;
: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;
color: black;
transition: 0.3s;
:focus {
color: dodgerBlue;
}
}
/* &svg:focus {
color: dodgerBlue;
} */
&.inputWithIcon {
position: relative;
}
`;
获得焦点的是input
,因此样式规则应该包含input:focus
。
当输入具有焦点时,此 CSS 规则将针对 svg:
input:focus + svg {
/* styling goes here */
}
这是一个使用直接 HTML 和 CSS 的示例。
div { margin: 8px; position: relative; } input { height: 50px; 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; font-size: 25px; } svg { position: absolute; left: 0; top: 8px; padding: 9px 8px; color: black; transition: 0.3s; } input:focus { border-color: dodgerBlue; box-shadow: 0 0 8px 0 dodgerBlue; } input:focus+svg { fill: dodgerBlue; }
<div> <input> <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 ZM 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 ZM 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.