如何去除MUI5双色调图标方形背景框并设置透明背景

问题出在你给deleteIcon嵌套了IconButton——IconButton自带默认的边框和背景样式，这就是你看到的方形框的来源。而且Chip组件的deleteIcon本身已经集成了点击交互逻辑，不需要额外套IconButton。

按以下步骤修改即可解决：

• 移除deleteIcon里的IconButton，直接传入HighlightOffTwoTone组件
• 按需调整图标的样式，若需要圆形背景，给图标添加borderRadius: '50%'来替代方形背景
• 若不需要背景色，直接去掉backgroundColor属性

修改后的代码：

import { Chip } from '@mui/material'
import { HighlightOffTwoTone } from '@mui/icons-material'

const MyChip = () => {
    return (
        <Chip
            sx={{
                borderColor: '#EBFFEC',
                color: '#009405',
                backgroundColor: '#EBFFEC',
            }}
            label='Chip Text'
            deleteIcon={
                <HighlightOffTwoTone
                    sx={{ 
                        color: '#fff', 
                        backgroundColor: '#A2E8A5',
                        borderRadius: '50%' // 让背景变成圆形，避免方形框
                    }}
                />
            }
            onDelete={() => console.log('clicked')}
        />
    )
}

如果不需要图标背景色，直接删除backgroundColor配置即可：

deleteIcon={
    <HighlightOffTwoTone sx={{ color: '#fff' }} />
}

这样修改后，图标就不会有多余的方形背景框，同时保留Chip的删除交互功能。

内容的提问来源于stack exchange，提问作者Steve