如何反转Material-UI图标主体与背景颜色？及实现指定箭头图标样式

1. 如何反转Material-UI图标的主体颜色与背景颜色？ #

有两种实用方式：

• 一键滤镜反转：给图标添加filter: invert(1)样式，能直接反转所有颜色，适合单色图标快速调整：

<ArrowForwardIosIcon sx={{ filter: 'invert(1)' }} />

• 手动精准配色：如果需要指定具体颜色，直接设置图标主体色和背景色即可，比如实现黑底白图标效果：

<ArrowForwardIosIcon 
  sx={{
    backgroundColor: '#000',
    color: '#fff',
    borderRadius: '50%', // 可选，需要圆形背景时添加
    padding: 0.5 // 调整内边距让背景与图标比例协调
  }}
/>

2. 如何实现截图右侧图标的样式？ #

你要的右侧图标是填充箭头加圆形彩色背景的效果，直接给ArrowForwardIosIcon加样式就能实现：

import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

<ArrowForwardIosIcon 
  sx={{
    backgroundColor: '#1976d2', // 替换成你需要的背景色
    color: '#fff', // 白色箭头主体
    borderRadius: '50%',
    padding: 0.5, // 内边距调整背景大小
    fontSize: '1.2rem' // 按需调整整体尺寸
  }}
/>

如果想要贴合Material-UI交互规范，也可以用IconButton组件包裹，自带点击反馈和圆形基础样式：

import IconButton from '@mui/material/IconButton';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

<IconButton sx={{ backgroundColor: '#1976d2' }}>
  <ArrowForwardIosIcon sx={{ color: '#fff' }} />
</IconButton>

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