Не удается удалить контур в входе ⇐ Javascript

[Anonymous]

Код: Выделить всё

import React, { useState } from 'react';
import "./styles/input.css";
import { CiSearch } from 'react-icons/ci';

interface SearchProps {
isMobile: boolean;
onSearch?: (query: string) => void;
}

const Search: React.FC = ({ isMobile, onSearch = () => {} }) => {
const [searchQuery, setSearchQuery] = useState('');
const [isFocused, setIsFocused] = useState(false);

const handleSearchChange = (e: React.ChangeEvent) => {
setSearchQuery(e.target.value);
};

const handleSearchSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSearch(searchQuery);
};

const handleFocus = (e) => {
setIsFocused(true);
console.log('Focused');
};

const handleBlur = () => {
setIsFocused(false);
console.log('Blurred');
};

const borderClass = isFocused ? 'border-b-2 border-main_theme' : 'border-b border-gray-300';
//   console.log('Applied class:', borderClass);

return (









);
};

export default Search;

Это мой код, проблема возникает с входным элементом, пытаясь стилизовать его оба с помощью Tailld CSS, встроенных стилей и дополнительных CSS, как в примере, но ни один из вариантов не помог (дополнительный стиль для него ниже) -
sstrong> iinput.css>
sstrong> iinput.css>
sstrong> input.css) -
strong> input.cs>input {
outline: none;
border: none;
box-shadow: none;
}

input:focus {
outline: none;
border-bottom: none;
}
< /code>
По какой -то причине после всех исправлений и дополнений я получаю этот результат при фокусировке (экран). Тем временем мне нужно полностью удалить контур, в то время как фокус


Подробнее здесь: https://stackoverflow.com/questions/795 ... e-in-input