Radium: Text decoration on links

Created on 18 Apr 2016 · 4Comments · Source: FormidableLabs/radium

I am trying to remove underline on hover state. I've added:

':hover': { color: textColourHover, textDecoration: 'none' },

...but doesn't appear to work. Any ideas? Thanks.

Source

willhalling

Most helpful comment

Here's some code I just wrote that works:

import React, { Component } from "react";
import Radium from "radium";

@Radium
class TestComponent extends Component {
  render() {
    return (
      <a href="#" style={styles.link}>test link</a>
    );
  }
}

const styles = {
  link: {
    color: "white",
    ":hover": {
      textDecoration: "none",
      color: "red",
    },
  },
};

export default TestComponent;

Are there errors in your console?

froatsnook on 19 Apr 2016

👍3 ❤1

All 4 comments

Here's some code I just wrote that works:

import React, { Component } from "react";
import Radium from "radium";

@Radium
class TestComponent extends Component {
  render() {
    return (
      <a href="#" style={styles.link}>test link</a>
    );
  }
}

const styles = {
  link: {
    color: "white",
    ":hover": {
      textDecoration: "none",
      color: "red",
    },
  },
};

export default TestComponent;

Are there errors in your console?

froatsnook on 19 Apr 2016

👍3 ❤1

Thanks for code snippet @froatsnook. Your comment allowed me to see an error in my code; my :hover selector was outside the link object.

Please close.

willhalling on 19 Apr 2016

Hey @willhalling, glad I could help. I can't close since I'm not a contributor. But I think you can close since it's your issue!

froatsnook on 19 Apr 2016

Thanks @froatsnook. I've now closed.

willhalling on 19 Apr 2016

Was this page helpful?

0 / 5 - 0 ratings