I am trying to figure out how to style links in react.
I've seen this post and tried most of it's suggestions.
I have defined a footer styling class as:
.footerlinks {
a:link {color: $Hand3};
font-weight: 300;
font-family: $secondary-font;
a:link {text-decoration:none; background-color:transparent; color: #FAF5F2;};
a:visited {text-decoration:none;background-color:transparent; color:#FAF5F2;};
a:hover {text-decoration:none;background-color:transparent; color:#FAF5F2;};
a:active {text-decoration:none;background-color:transparent; color:#FAF5F2;};
color: $Hand3;
}
Then, I have a footer link as:
<Link to={'/about'} className="footerlinks">About</Link>
The 'color' css field applies, but none of the a tag links work. When you hover on a link it turns blue underline. The css inspector shows the webkit a styling has been misapplied, except for the pointer.
What's the trick to styling a tags in react?
It should work the same as with regular HTML and CSS. Assuming you are using react-router or similar, Link should generate an a tag.
I think the problem is where you have put the class. The CSS is expecting a component with the class footerlinks followed by an a element inside.
Try changing your code to:
<div className="footerlinks">
<Link to={'/about'}>About</Link>
</div>
If you directly want to apply css on react links, you have another option that is
You can use <NavLink> instead of <Link>
<NavLink
className="CssClassForNormalLinks"
activeClassName={location.pathname !== "your pathname"? null : "CssClassForActiveLinks"}
to="/home"
>
HOME
</NavLink>
Related
For some reason the React Router Link is significantly changing my css. Is there a way I can remove any styling impact from the Link?
Without Link:
With Link:
This is the code for the Link. It has no style features.
```
<Link to={`/link/${item.id}`}>
```
style={{textDecoration: 'none'}}
Use this Npm : https://www.npmjs.com/package/react-router-bootstrap
import { LinkContainer } from 'react-router-bootstrap'
<LinkContainer to="/foo/bar">
<Button>Foo</Button>
</LinkContainer>
This will work same as the link without effecting your css
Since Link get's transpiled to an <a>, you can use css to style <a> all and change all links color to white:
a {
color: #FFF;
}
a:hover {
color: #00F
}
Or add a .link class to each Link:
<Link to="/" className="link" />
...
.link {
color: #FFF;
}
.link:hover {
color: #00F
}
Interestingly enough, adding css to the inside of the Link item changed the formatting. I copied the css of the images from what they previously were to the styling of the image inside the link and it looks the same.
I am making a navbar for a website made via GatsbyJS. I am attempting to style the links in the navbar such that they do not have an underline.
I have already set the link to not have any text decoration--when I inspect the element in my browser, it even shows the "text-decoration: none" property. I have also confirmed that my CSS is influencing the object--I can change the color of the text, for example, it is only the text-decoration which I cannot influence.
CSS:
.nav {
background: #fd8;
}
.nav ul {
text-align: center;
border: 1px solid #000;
}
.nav ul li {
display: inline-block;
padding: 8px 10px;
margin: 0;
}
.nav ul li a {
color: #221;
text-decoration: none;
}
html + js:
...
import { Link } from "gatsby"
import styles from "./navbar.module.css"
...
<nav className={styles.nav}>
<ul>
<li>
<Link style={{ textDecoration: 'none' }} to="/about">
About
</Link>
</li>
EDIT: the inline styling with textDecoration was a product of some fiddling I was doing prior to posting this question and was not present until recently. Removing it has no effect on the issue.
Rendered HTML by request:
<nav class="navbar-module--nav--25Dcz">
<ul>
<li>
About
</li>
...
</ul>
</nav>
I have discovered that the errant underline was actually a 1px box-shadow, probably from some global style I can't find associated with the Gatsby Typography plugin.
When you say .nav you want to select a class by that. And as I see, in your html,
nav (<nav...) is a tag with a class navbar-module--nav--25Dcz
So if you change your CSS to:
(Remove the period character . from .nav)
nav {...}
nav ul {...}
nav ul li {...}
nav ul li a {...}
It should work fine.
Also, take a look at Styled Components: https://www.styled-components.com/ which let you write CSS in JS and use similar features from preprocessors like Less and SASS.
Hope this helps!
Your issue is that you're using a class selector (.nav) when you should be using a tag name selector instead. Changing to nav ul li a{text-decoration:none} should fix your issue. If that doesn't work, then you probably have some CSS with higher precedence somewhere that is overriding it.
So for those still searching for an answer. It's really a BUG. At least with <ul>, <li> tags and their nesting. There's just one bypass, and even that has a bit of a limitation. So here's a sample with a fixed (removed) underline and it contains notes also on what to add, what to avoid.
https://stackblitz.com/edit/keep-remove-underline-from-nested-li-item?file=index.html [working text decoration removal]
the solution is:
need to use inline-block for <ul>, set vertical top align and 100% width
avoid to use white-space nowrap
I tried everything to remove it, then after reading this I remembered that I added what in the link https://www.gatsbyjs.org/docs/typography-js/
Icones was underlined, anything that will be was underlined
nothing worked until I removed that.
I can't explain why, but when I referenced a class that was LESS specific I was able to get the text decoration to go away with text-decoration none. So if you have a less specific wrapper class try targeting the links with that
.wrapper a {
text-decoration:none;
}
You can select the global a tag or be specific, and after text decoration, add !important. That will override any default styling that gatsby is imposing.
.nav ul li a {
color: #221;
text-decoration: none !important;
}
I have a post that has a title. I select like so =>
<h4><strong><%= link_to post.title, post, :class => "post-title"
%></strong></h4>
I want to take away the text-decoration it gets by default form being a link. So i have this in my posts css =>
.post-title {
text-decoration: none;
}
I have tried selecting the text in all kinds of different ways and I just can't get that text-decoration to go away..
the html output is just the title of the post with standard text-decoration (blue color with an underline)
I checked safari web inspector and none of my rules were overridden.
It worked when I gave the erb an id of post-title and did the following in my css to select it:
a#post-title {
text-decoration: none;
}
Try...
a.post-title {text-decoration: none;}
There's not enough CSS specificity in your selector.
There will be a browser or reset stylesheet applying the text decoration to anchor elements and your stylesheet applying it to anything with a class of 'post-title'. At the moment the anchor style is winning.
Example
a {text-decoration: underline} //Browser CSS
.post-title {text-decoration: none} //Your CSS
Both of those apply to...
a.post-title
I'm new to css. Here's my html
Add Note
The class "clickme" is part of a jquery function and the id is supposed to change the size from the standard of other links but it isn't making the text smaller.
#noteaddbutton{
font-size:13px;
}
a:link{
font-size:18px;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
It is working for me. I am using FF8. You can try this.
#noteaddbutton{
font-size:13px !important;
}
I think a:link is taking precedence over #noteaddbutton. Try using
a.clickme:link{ font-size: 13px;}
CSS is read starting at the top and going down (cascading style sheet). The element you are attempting to style has the following qualities about it,
<a> tag
#noteaddbutton
.clickme
In your css, you are styling all <a> tags and #noteaddbutton, but the <a> style is after the style just for the ID. Since the ID style is before the <a> style, the <a> style takes precedence.
You can fix this by doing two things...
1.) Putting the ID styles below the <a> styles:
a:link{
font-size:18px;
text-decoration:none;
}
#noteaddbutton{
font-size:13px;
}
2.) Putting !important after the font-size attribute on the ID style
#noteaddbutton{
font-size:13px !important;
}
You can put #2 anywhere you like.
Try making the class !important allowing it to take precedence:
a:link{
font-size:18px !important;
text-decoration:none;
}
It works for me, by example in this fiddle: http://jsfiddle.net/GFnK7/2/
First link is 13px and on yellow background for me (Fx9, WinXP).
The 2nd link has a dummy destination that you shouldn't have visited for now. I see it on lightgreen bg, 18px and then after a click on violet bg, if and only if layout.css.visited_links_enabled is set to true in about:config.
The 3rd link is identical to the 2nd one.
The pseudo-class :link applies to un-visited links. With a value of # for href, you'll soon have visited this URL ;) (after one click on any href="#" link)
Note: a selector with an id should be more specific than another selector with only a pseudo-class and an element (:link with a). This is (1,0,0) against (0,1,1) in terms of selector specificity.
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}