如何修改Material UI v4带图片和文字的Button前景色

问题核心 #

用<img>标签加载SVG时，SVG是作为外部资源存在的，CSS无法穿透到SVG内部修改其填充色，所以直接设置color属性无效。下面给出两种纯CSS/组件化的解决方案：

方案一：将SVG转为React组件引入（推荐） #

把SVG内容内联到React组件中，这样就能通过CSS控制SVG的颜色（需要让SVG内部的路径使用currentColor继承父元素的颜色）。

步骤： #

1. 将SVG转为React组件
   提取icon.svg的内容，创建一个组件：

   // Icon.js
   import React from 'react';
   
   const Icon = (props) => (
     <svg width="24" height="24" viewBox="0 0 24 24" {...props}>
       {/* 关键：把fill设为currentColor，继承父元素的color */}
       <path fill="currentColor" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" />
     </svg>
   );
   
   export default Icon;
   

2. 修改原Button组件代码
   引入Icon组件，让图标自动继承Button的颜色：

   import Icon from "./Icon";
   import clsx from "clsx";
   import {Button, makeStyles, Typography} from "@material-ui/core";
   
   const styles = makeStyles((theme) => ({
       button: {
           color: "black",
           "&:hover": {
               color: "red",
               // 图标会自动继承Button的color，无需额外设置
           },
       },
       icon: {
           width: 20,
           height: 20,
           // 颜色继承自父元素，不用单独设置color
       },
       layout: {
           textTransform: 'none',
           color: "inherit",
       },
   }));
   
   const classes = styles(props);
   
   return (
   <>
     <Button
         color="inherit"
         className={clsx(classes.button)}
         onClick={handleClick}
         startIcon={<Icon className={clsx(classes.icon)} />}
     >
         <Typography className={clsx(classes.layout)}>
             Share
         </Typography>
     </Button>
   </>
   );
   

方案二：使用CSS filter滤镜（无需修改SVG引入方式） #

如果不想改动SVG的引入方式，可以用CSS filter属性将图标颜色转换为目标色。这种方法适合简单的颜色转换，缺点是颜色精度可能不如内联SVG。

修改样式代码： #

const styles = makeStyles((theme) => ({
    button: {
        color: "black",
        "&:hover": {
            color: "red",
            "& $icon": {
                // 把黑色SVG转为红色的滤镜参数，可根据需要调整
                filter: "brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(7499%) hue-rotate(359deg) brightness(103%) contrast(106%)",
            }
        },
    },
    icon: {
        color: "black",
    },
    layout: {
        textTransform: 'none',
        color: "inherit",
    },
}));

说明： #

• 可以通过CSS滤镜生成工具生成对应颜色的filter参数，输入目标色就能得到代码。
• 这种方法只适合单色SVG，多色SVG的颜色转换会不准确。

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