Почему иконка не отображается в чекбоксе в props, а в default props все работает
import { styled } from '@mui/material/styles'
import { Checkbox } from '@mui/material'
import { createTheme } from '@mui/material/styles'
import { ReactComponent as IcDefaultCheckbox } from '../../assets/images/icons/ic_checkbox_not_checked.svg'
import { ReactComponent as IcCheckboxGold } from '../../assets/images/icons/ic_cheked_gold.svg'
import { ReactComponent as IcCheckboxDiamond } from '../../assets/images/icons/ic_cheked_diamond.svg'
import React, { ReactNode } from 'react'
type VariantCheckbox = 'standard' | 'silver' | 'gold' | 'diamond'
declare module '@mui/material/Checkbox' {
interface CheckboxProps {
variant: VariantCheckbox
}
}
export const themeNftCard = createTheme({
components: {
MuiCheckbox: {
defaultProps: {
icon: <IcDefaultCheckbox />,
//checkedIcon: <IcCheckboxGold />,
style: {
position: 'absolute',
top: '30px',
right: '30px'
}
},
variants: [
{
props: {
variant: 'standard',
checkedIcon: <IcCheckboxGold />,
icon: <IcDefaultCheckbox />
},
style: {
'& .Mui-checked': {
color: '#fff'
}
}
},
{
props: {
variant: 'gold',
checkedIcon: <IcCheckboxGold />,
icon: <IcDefaultCheckbox />
},
style: {
'&.Mui-checked': {
color: 'var(--color-gold)'
}
}
},
{
props: {
variant: 'diamond',
checkedIcon: <IcCheckboxDiamond />,
icon: <IcDefaultCheckbox />
},
style: {
'&.Mui-checked': {
color: 'var(--color-diamond)'
}
}
}
]
}
}
})