Reports

You can achieve this by passing both buttonColor and the buttonHoverColor as props to the ButtonSlider and then pass the values to the ButtonSlider component when it's rendered.

const ButtonSlider = styled(Button, {
  shouldForwardProp: (prop) => prop !== "buttonColor" && prop !== "buttonHoverColor",
})(
  ({ theme, buttonColor, buttonHoverColor }) => ({
    backgroundColor: buttonColor,
    "&:hover": {
      backgroundColor: buttonHoverColor,
    },
  })
);

<ButtonSlider
    color="secondary"
    variant="contained"
    buttonColor={data.buttonColor}
    buttonHoverColor={data.buttonHoverColor}
    >
      {data.buttonText}
</ButtonSlider>

The reason I have shouldForwardProp method defined in the styled function is to prevent you from getting errors like this in your console:

React does not recognize the buttonColor prop on a DOM element.

I hope this fixes your challenge.

79508175