Closed boskiv closed 2 years ago
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?
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
?
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):
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:
I tried to do that way, but it does not applied