score:1

this is my solution to keep the same button style.

import { link, linkprops } from 'react-router-dom'
import button from '@material-ui/core/button'

const cardbutton: react.fc<linkprops> = ({ children, ...linkprops }) => (
  <link style={{ textdecoration: 'none' }} {...linkprops}>
    <button size="small" color="primary">
      {children}
    </button>
  </link>
)

score:2

in cardactionarea set component prop to link and to to your desired url. this way you can use browser's back and forward button to navigate in your react application.

for example:

import { link } from "react-router-dom";
import {
  card,
  cardactionarea,
  cardcontent,
  typography,
} from "@mui/material";

<card>
  <cardactionarea
    component={link}
    to="your-url"
  >
    <cardcontent>
      <typography variant="h5">
        card title
      </typography>
      <typography variant="body2" color="text.secondary">
        card description
      </typography>
    </cardcontent>
  </cardactionarea>
</card>

score:4

from the documentation cardactionarea takes two props classes and children, add the link as a child.

<cardactionarea component="div" disableripple>
  <link to="/blog">
    <cardmedia
      classname={classes.media}
      image="images/marmik.jpg"
      title="marmik desai"
    />
    <cardcontent>
      <typography gutterbottom variant="h5" component="h2">
        marmik desai
  </typography>
      <typography variant="body2" color="textsecondary" component="p">
        i am front end developer.
  </typography>
    </cardcontent>
  </link>
</cardactionarea>

score:5

you can using like this, put you cardactionarea component in link

return (
        <card classname={classes.root}>
            <link to="/blog" component={cardactionarea}>
                <cardmedia
                    classname={classes.media}
                    image={props.thumbnail}
                    title={props.thumbnail}
                />
                <cardcontent>
                    <typography gutterbottom variant="h6" component="h6">
                        {props.title}
                    </typography>
                    <typography variant='caption' component={"sm"}>
                        update at {(date(props.date).substring(0, 16))}
                        on {props.category}
                    </typography>
                    <divider />
                    <typography variant="body2" component="p">
                        {props.subtitle}
                    </typography>
                </cardcontent>
            </link>
            <cardactions>
                {!props.isadmin && <link to={props.admin_url} component={button} size="small" >edit</link>}
                <link to={props.public_url} component={button} size="small" >readmore</link>
            </cardactions>
        </card>
    );

score:5

import { link as routerlink } from 'react-router-dom';
import { cardactionarea } from '@material-ui/core';


<cardactionarea component={routerlink} to={'/blog'}>
    // ...
</cardactionarea >



Related Query

More Query from same tag