typescript - Cómo pasar una variable a la función styled de MUI en ReactJS
¿Cómo puedo pasar una variable para cambiar condicionalmente las propiedades de estilos al usar la función styled de MUI? Quiero lograr esto: borderColor: darkMode ? 'white' : 'black'
const StyledSelect = styled(Select)(() => ({
"& fieldset": {
borderColor: 'dark',
}
}));
function BasicSelect() {
const { darkMode }= useSelector((state: {options: {darkMode: boolean}})=>state.options)
const [age, setAge] = React.useState('');
const handleChange = (event: SelectChangeEvent) => {
setAge(event.target.value as string);
};
return (
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<StyledSelect
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
);
}
Una de las opciones que funciona es crear una función y pasarla a la propiedad sx así, pero me pregunto si es posible pasar una variable directamente a la función styled
const selectstyles = (darkMode) => ({
"& fieldset": {
borderColor: darkMode ? 'white' : 'black'
}
})
<StyledSelect sx={selectStyles(darkMode)} ...></StyledSelect>
Respuesta #1
La misma pregunta se hizo aquí: https://stackoverflow.com/a/69341672/8972840 Esto te ayudará a pasar props a través de la función styled().