Can I change color for particular Link on a Page?

[boskiv]

I tried to do that way, but it does not applied

<Link marginRight={8} size={300} color="#fff" cursor="pointer">
    LOGIN
</Link>

[boskiv]

I see I can choose neutral but no way to make it white except modify for all in custom theme? Or maybe I can add a new style white somehow?

[boskiv]

Only way I can solve it is

.navLink {
    color: #fff !important;
}

.navLink:hover {
    color: #D14343 !important;
}

import styles from './index.module.css';
...
 <Link marginRight={8} size={300} color="neutral" cursor="pointer" className={styles.navLink}>
 ...

Am I right ? No other way to exclude !important ?

[brandongregoryscott]

The current Link component is not very flexible in terms of props or theming. In fact, the comment for that prop in the typescript definitions is misleading (passing in 'green' has no effect based on this code):

https://github.com/segmentio/evergreen/blob/0ba8a87b70c029febac59b57277336a8f45fe5cd/src/themes/default/components/link.js#L5-L11

It also does not support the appearance prop like some other components do. If you only ever expect to have one type of link, you can write custom theme values over the ones we have and that should work:

const theme = mergeTheme(defaultTheme, {
  components: {
    Link: {
      baseStyle: {
        color: "#f3f3f3"
      },
    }
  }
});

The other recommendation would be just rolling your own Link component, since ours is pretty much just a <Text /> component for styling that creates an anchor tag under the hood:

https://github.com/segmentio/evergreen/blob/0ba8a87b70c029febac59b57277336a8f45fe5cd/src/typography/src/Link.js#L27