Well, that a whole lot of Well's in one paragraph. NAVLINK is provided by REACT-ROUTER and NOT by STYLED-COMPONENTS. What's so special about it you may ask ? Well, it was built specifically for styling links you use with React-Router. React-Router has a module called NavLinks that we can use as a component. Well well well, this was the moment where I found something really interesting that led me to write this article. METHOD-3: Styling React-Router links using 'NavLinks' and 'activeClassNames'.
Are you just noticing this now ? Greatttt ! What I meant by is that - in METHOD-1,we had to write textDecoration instead of text-decoration. Solution : Now you can style your Link directly by creating another component instance i.e StyledLink, and then applying style to it.Ĭonclusion : This is a cleaner way than METHOD-1 because unlike in the earlier method, here we are actually writing CSS. The reason why we can use the latter one i.e component name, is because we have imported a component here that is Link, now we can pass this Link like this: styled together with 'tagNames' (e.g div or li or h1 etc) or a valid component name can be used to apply styles to a component. If you are familiar with styled components, you should know that styled is like the very basic thing you import from styled-components. METHOD 2: Styling links using 'ponentName' format.
Here is a Codesandbox link if you are interesting in taking a quick glance at the code for METHOD-1 and if you wish you can follow along too. These basically are similar to how we use inline styles in HTML.So we create a style attribute with the styles inside it in an object form.Ĭonclusion : This is not so great way as it will become difficult to code out and track individual styles as the app scales - Also, it does not meet the standards of our Goals stated at the beginning of the article. Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
