Minha solução do desafio

Segue minha solução do desafio. Para ter uma borda com degradê usei uma gambiarra: coloquei o input dentro de uma div e botei o degradê no fundo dela e o input por cima com uma cor de fundo igual à do fundo da página.

import styled from "styled-components"
import lupa from './search.png'

const CampoEstilizado = styled.div`
    border-radius: 10px;
    background: linear-gradient(to right, #C98CF1, #7B78E5);
    display: flex;
    padding: 2px;
    position: relative;
    height: 4rem;
    
    input {
        background-color: #041d3e;
        border-radius: 10px;
        color: white;
        padding: .75rem 1rem;
        width: 35rem;
        line-height: 1;
    }
`

const LupaEstilizada = styled.img`
    position: absolute;
    top: .75rem;
    right: 1rem;
    --tamanho: 2.2rem;
    width: var(--tamanho);
    height: var(--tamanho);
`

export default function CampoTexto() {
    return (
        <CampoEstilizado>
            <input type="text" placeholder="O que você procura?" />
            <LupaEstilizada src={lupa} alt="" aria-hidden="true" />
        </CampoEstilizado>
    )
}