I am currently working on creating a searchBar and customizing its CSS, but unfortunately, most of the styling properties seem to not be taking effect. So far, only changing colors seems to work as expected.
.mainBar{
background-color: blue;
width: '50rem';
background: '#F2F1F9';
border: 'none';
padding: '0.5rem';
}
import './searchBar.css';
const SearchBar = ({ keyword, setKeyword }) => {
return (
<input
className='mainBar'
key='random1'
value={keyword}
placeholder={'search country'}
onChange={(e) => setKeyword(e.target.value)}
/>
);
};
Although the component has a blue background color, any attempts to modify the width property do not reflect any changes in the appearance of the searchBar.