input [type = "search"] :: - webkit-search-украшение: hover {курсор: указатель;} в стилевых компонентах

Question

Как видно из названия, как использовать input[type="search"]::-webkit-search-decoration:hover {cursor: pointer;} в стилизованном компоненте? ...

приведенный ниже код не работает или не распознается.

const SomeInput = styled.input`
    border-radius: 8px;

    input[type="search"]::-webkit-search-decoration:hover,
        input[type="search"]::-webkit-search-cancel-button:hover { 
            cursor:pointer; 
        }
`;

Попытка реализовать здесь как стилизованный компонент: отображать указатель на значке при наведении курсора в текстовом поле поиска

Answer 1

Я получил это с помощью символа амперсанда внутри стилизованного компонента и добавил type="search" в JSX.

import React from "react";
import "./styles.css";
import styled from "styled-components";

export default function App() {
  const SomeInput = styled.input`
    border-radius: 8px;

    &::-webkit-search-decoration:hover,
    &::-webkit-search-cancel-button:hover {
      cursor: pointer;
    }
  `;

  return (
    <div className="App">
      <SomeInput type="search" />
    </div>
  );
}

CodeSandbox