![]() ![]() So if the path is '/' then styling will ONLY be applied to the Home page. current and li tag to make a border-bottom to the corresponding link whenenver the path of the URL changes.Įxact keyword is used so as to specifically target the currently selected URL. ![]() It would look something like this:ĪctiveClassName is an attribute that we can use to create a class that we can later apply style to it. React router dom link and material ui button code#Anyway, let's jump into the code but beware there are some major changes here:Įxplanation : So basically, NavLink is a special style of Link that we can add styles to it when it matches a certain path in the URL.So if I am currently in '/' i.e Home, I can apply a style border-bottom to the 'Home' link and if I am in '/about' path then apply style to 'About' link. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |