创建搜索栏的问题与css不影响它

Question

我试图创建一个搜索栏和我的CSS，但几乎所有我放在它不工作，我的意思是只有颜色的东西工作。

.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)}
/>
);
};

所以组件有一个蓝色的背景，但是如果我改变宽度，什么都不会发生。

Answer 1

尝试去掉引号。它应该是这样的

.mainBar{
background-color: blue;
width: 50rem;
background: #F2F1F9;
border: none;
padding: 0.5rem;
}