How to set hover styling for Typography component?

[stijnvanlieshout]

I want a normal text link to be underlined on hover. In order to that I've tried to style a Typography component nested inside a link component but this doesn't work. I've searched through the entire documentation but can't find anything about adjusting hover effects on typography/link components.

const styles = {
  textDecoration: 'none',
  '&:hover': {
    textDecoration: 'underline',
}

<Link to="/mypage"> 
      <Typography 
        color="secondary"
        type="body1" 
        style={styles}> 
          {props.text}  
      </Typography>
</Link>;

Expected Behavior

I expect the link to underline on hover.

Current Behavior

Nothing happens.

Steps to Reproduce (for bugs)

The full code for the component:

import * as React from 'react';
import { Link } from "react-router-dom";
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';

const styles = {
  textDecoration: 'none',
  '&:hover': {
    color: 'white'
  }
};

function TextLink(props) {

  return (
    <Link
        to="/"
      > 
      <Typography 
        color="secondary"
        type="body1" 
        style={styles}> 
          {props.text}  
      </Typography>
    </Link>;
  )
}

export default withStyles(styles)(TextLink);

Your Environment

"material-ui": "^1.0.0-beta.30", "react": "^16.2.0", "react-dom": "^16.2.0",

[vdhieu]

You have use className and classes

const styles = {
+  myTextStyle: {
     textDecoration: 'none',
     '&:hover': {
      color: 'white'
   }
+ }
};

function TextLink(props) {

  return (
    <Link
        to="/"
      > 
      <Typography 
        color="secondary"
        type="body1" 
-      style={styles}
+      className={props.classes.myTextStyle}> 
          {props.text}  
      </Typography>
    </Link>;
  )
}

export default withStyles(styles)(TextLink);

[oliviertassinari]

@vdhieu Is right. We have some alternative APIs too: https://github.com/mui-org/material-ui/blob/v1-beta/docs/src/pages/customization/css-in-js.md#alternative-apis.

[stijnvanlieshout]

Thanks, works perfectly

[metipton]

Was trying to figure this out for days. Thank you!

[mamadreza63]

why can not change textDecoration in '&:hover'

[deveshlashkari]

Works perfectly. Thanks!

[ranafaraznaru]

this same bugs happening with me , i couldnt fix it . if i give typography color then its color wont change on hover . here is the code......................

import * as React from "react"; import { makeStyles } from "@mui/styles"; import { Box, Stack } from "@mui/material"; import Card from "@mui/material/Card"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography";

const useStyles = makeStyles({ testingDemo: { color: "#17202C" } });

const bull = ( <Box component="span" sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}

• );

export default function BasicCard() { const classes = useStyles();

return ( <Card sx={{ minWidth: 275, "&:hover": { backgroundColor: "#4363EA", color: "#FFF !important" } }}

<CardContent sx={{ "&:hover": { backgroundColor: "#4363EA", color: "#FFF !important" } }}

<Typography sx={{ fontSize: 14 }} className={classes.testingDemo} gutterBottom

Word of the Day

be{bull}nev{bull}o{bull}lent

<Typography sx={{ mb: 1.5 }}>adjective

well meaning and kindly.
{'"a benevolent smile"'}

Learn More

); }