[英]How to pass variable to MUI styled function in ReactJS
如何在使用 MUI 樣式的 function 時傳遞變量以有條件地更改 styles 屬性? 我想實現這個: borderColor: darkMode? 'white': 'black'
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>
);
}
可行的選項之一是制作 function 並將其傳遞給sx
道具,但我想知道是否可以將變量直接傳遞給styled
化的 function
const selectstyles = (darkMode) => ({
"& fieldset": {
borderColor: darkMode ? 'white' : 'black'
}
})
<StyledSelect sx={selectStyles(darkMode)} ...></StyledSelect>
此處提出了相同的問題: https://stackoverflow.com/a/69341672/8972840這將幫助您通過styled()
function 傳遞道具。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.