Estoy desarrollando una aplicación web usando React + Material UI . Me gustaría cambiar el tamaño de fuente del componente Select . Tengo que usar la propiedad MenuProps , como el fragmento de código que sigue. Sin embargo, no está funcionando.
const MenuProps = { PaperProps: { sx: { '& .MuiMenuItem-root': { fontSize: 10, }, }, style: { fontSize: 10, }, }, }; const MultipleSelectTags = () => { const [tagFilter, setTagFilter] = useState([]); const handleChange = (event) => { const { target: { value }, } = event; setTagFilter( typeof value === 'string' ? value.split(',') : value, ); }; return ( <div> <FormControl sx={{ m: 1, width: 200 }} size="small"> <InputLabel>Tag</InputLabel> <Select multiple value={tagFilter} onChange={handleChange} input={<OutlinedInput label="Tag" />} renderValue={(selected) => selected.join(', ')} MenuProps={MenuProps} > {names.map((name) => ( <MenuItem key={name} value={name}> <Checkbox checked={tagFilter.indexOf(name) > -1} /> <ListItemText primary={name} /> </MenuItem> ))} </Select> </FormControl> </div> ); }¿Puede alguien ayudarme?
Aquí hay una solución:
<Select multiple value={tagFilter} onChange={handleChange} input={<OutlinedInput label="Tag" />} renderValue={(selected) => selected.join(', ')} id="my-simple-select" sx={{ '& #my-simple-select': { fontSize: '2rem', } }} > {names.map((name) => ( <MenuItem key={name} value={name}> <Checkbox checked={tagFilter.indexOf(name) > -1} /> <ListItemText primary={name} /> </MenuItem> ))} </Select> Además, si desea aplicarlo a nivel de clase: '& .MuiSelect-select'
Simplemente puede agregar el accesorio de tamaño de fuente directamente a la Entrada:
<Select multiple value={tagFilter} onChange={handleChange} input={<OutlinedInput sx={{fontSize: '2rem'}} label="Tag" />} renderValue={(selected) => selected.join(', ')} > {names.map((name) => ( <MenuItem key={name} value={name}> <Checkbox checked={tagFilter.indexOf(name) > -1} /> <ListItemText primary={name} /> </MenuItem> ))} </Select>