Question 72434 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to change color of material ui v4 Button with image and text – Reactjs

I am trying change the foreground color of a material ui v4 button that has a svg image and text. The text changes color alright, however not the image. I have dropped in the browser debugger and tried setting the color css manually on the button, it doesn’t even work there, do I need to use a different attribute besides color? I have to use v4 since the rest of the code base is that.

import image from "Images/icons/icon.svg";
import clsx from "clsx";
import {Button, makeStyles, Typography} from "@material-ui/core";

const styles = makeStyles((theme) => ({
    button: {
        color: "black",
        "&:hover": {
            color: "red",
            "& $icon": {
                color: "red",
            }
        },
    },
    icon: () => ({
        color: "black",
    }),
    layout: {
        textTransform: 'none',
        color: "inherit",
    },
}));

const classes = styles(props);

return (
<>
  <Button
      color="inherit"
      className={clsx(classes.button)}
      onClick={handleClick}
      startIcon={
      <img className={clsx(classes.icon)} src={image} />}
  >
      <Typography className={clsx(classes.layout)}>
          Share
      </Typography>
  </Button>
<>
);

If I add a second image in a different color and change the Button component to add these fields it works, however it seems like a very hacky solution, any idea how to do this in css?

  <Button
      color="inherit"
      className={clsx(classes.shareButton)}
      onClick={handleClick}
      onMouseEnter={(e: any) => {
          e.currentTarget.children[0].children[0].children[0].src = imageHover
      }}
      onMouseLeave={(e: any) => {
          e.currentTarget.children[0].children[0].children[0].src = image
      }}
      startIcon={
      <img
          className={clsx(classes.icon)}
          src={image}
      />}
Tags:

2

Answers


  1. 0

    Instead of using <img> tag, use the raw SVG instead. This allow you to specify fill="currentColor" property, which inherits from font color of the parent. Example below:

    button:hover {
  color: red;
}
svg {
  vertical-align: middle;
}
    <button>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="24"
    viewBox="0 96 960 960"
    width="24"
  >
    <path
      d="M378 810 154 586l43-43 181 181 384-384 43 43-427 427Z"
      fill="currentColor"
    /></svg
  >Hello World
</button>
    Login or Signup to reply.
  2. 0

    I guess your main goal is to set fill="currentColor" to your svg image.
    Here’s an example.

    import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import SvgIcon from '@material-ui/core/SvgIcon';

// Try to build your Icon as SvgIcon end edit your svg to have the property fill="currentColor" and then pass your color to the component.
function HomeIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" />
    </SvgIcon>
  );
}

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
    "&:hover": {
      color: "red",
    },
  },
}));

return (
  <Button
      className={classes.button}
      onClick={handleClick}
      startIcon={<HomeIcon />}
  >
       Share
  </Button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search