Я использую React и Mui Select, который имеет кастомные стили. Я не понимаю, как мне перекинуть пропсы в эти стили. В этом примере я прокидываю в компонент MuiSelect параметр height, который по умолчанию равен 32px. Select использует параметр sx={styles}. Мне нужно вставить height в виде переменной в объекте styles. Как это сделать?
import React, { useState } from 'react';
import Select, {SelectChangeEvent} from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
const options = [
{id: '1', value: 'One'},
{id: '2', value: 'Two'},
{id: '3', value: 'Three'},
{id: '4', value: 'Four'},
]
const styles = {
width: '100%',
border: '1px solid #D9D9D9',
borderRadius: '16px',
fontFamily: 'Montserrat',
fontStyle: 'normal',
fontWeight: 700,
fontSize: '14px',
color: '#5E5E5E',
height: '40px',
}
interface IProps {
height?: string;
}
const MuiSelect: React.FC<IProps> = ({height = '32px'}) => {
const [value, setValue] = useState<string>('One');
const handleChange = (e: SelectChangeEvent) => {
setValue(e.target.value);
}
return (
<Select
value={value}
onChange={handleChange}
sx={styles}
>
{
options.map(item =>
<MenuItem
key={item.id}
value={item.value}
>
{item.value}
</MenuItem>)
}
</Select>
);
}
export default MuiSelect;