@StepsOnes

Почему иконка не отображается в чекбоксе (MUI)?

Почему иконка не отображается в чекбоксе в 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)'
						}
					}
				}
			]
		}
	}
})
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы