Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I make button with link look like normal button?

I have a button to download a file with a filename. To do that I wrote this:

<Button
  color='primary'
  href=`/apiproxy/objects/${id}/subobjects`
  LinkComponent={React.forwardRef((props, ref) => <Link {...props} type='text/csv' download={`object_${id}_subobjects.csv`} ref={ref} />)}
/>

The resulting button looks the same as my other buttons which don’t have href attribute (also with color='primary'), but on hover its text changes colour to blue, unlike with the other buttons, where it stays white.
How to make it styled the same as other buttons? I can specify &:hover text colour to white, but that will break when theme changes the text colour of other buttons.

Is there a way to change the Link component to make it styled the same as other buttons, or if not, what in the palette do buttons use as their hover text colour so that I can set it to that?

Tags:

2

Answers


  1. 0

    I think you can use styledComponent for Link component. like following…

    const theme = useTheme();

const StyledLink = styled(Link)(({ theme, color = "primary" }) => ({
  ":hover": {
    color: theme.palette.secondary.main,
  },
}));

<Button
  color="primary"
  href="/apiproxy/objects/1/subobjects"
  LinkComponent={React.forwardRef((props, ref) => (
    <StyledLink
      {...props}
      type="text/csv"
      download={"object_1_subobjects.csv"}
      ref={ref}
      theme={theme}
    />
  ))}
/>

    You can set the hover color in palette in theme.js file and use that color like theme.palette.${hoverColor}

    Please check this test component.
    https://codesandbox.io/p/sandbox/mui-28251-28335-forked-j2x8cd?file=%2Fsrc%2FApp.js

    Login or Signup to reply.
  2. 0

    Maybe you can make the button redirect them to a MediaFire where the file could be downloaded:

    <a href="link-to-media"><button class="buttonClass">Download</button></a>

    and then you can modify the buttonClass to be whatever you like.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search