QuestionCraft Copy this MUI StyledPaperto Your Project

import Typography from "@mui/material/Typography" import TextField from "@mui/material/TextField" import MenuItem from "@mui/material/MenuItem" import Box from "@mui/material/Box" import { flexedTextAndSelectStyles } from "./flexedTextAndSelect.styles" import { flexedTextAndSelectPropsType } from "./flexedTextAndSelect.types" const FlexedTextAndSelect = ({title,value,handleChange,disableValue,possibleValues, disabled=false}:flexedTextAndSelectPropsType) => { const disableSelect = value === null const classes = flexedTextAndSelectStyles() return ( <Box className={classes.selectContainer}> <Typography variant="h5"> {title} </Typography> <TextField size="small" sx={{ width: 300 }} disabled={disabled} select value={disableSelect ? disableValue : value} onChange={e => handleChange(e.target.value)} > { disableSelect ? <MenuItem value={disableValue}>{disableValue}</MenuItem> : possibleValues.map(el => <MenuItem value={el} key={el}>{el}</MenuItem>) } </TextField> </Box> ) } export default FlexedTextAndSelect