im trying to make a search box with a magnifying glass icon that becomes blue when the input field is focused.
the MagnifyingGlass component inherits its color from its parent element.
import styles from './Search.module.sass';
import { useState } from 'react';
import MagnifyingGlass from '../../icons/MagnifyingGlass';
const Search = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<div className={styles.searchWrapper}>
<input
value={inputValue}
onChange={handleChange}
className={styles.searchInput}
type='text'
placeholder='Waar bent u naar opzoek?'
/>
<span> // needs to contain a className that results in the color to change
<MagnifyingGlass size='small' /> // inherits color from parent
</span>
</div>
);
};
export default Search;