Material-ui: How to set hover styling for Typography component?

Created on 28 Jan 2018 · 5Comments · Source: mui-org/material-ui

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",

question

Source

stijnvanlieshout

👍3

Most helpful comment

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);

vdhieu on 29 Jan 2018

👍21 🎉4

All 5 comments

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);

vdhieu on 29 Jan 2018

👍21 🎉4

@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.