Topic: change color of MDBNavLink
Jasoniyi free asked 5 years ago
Expected behavior when i set MDBNavbar color="transparent" the text become dark or light
Actual behavior how can I change the color of MDBNavLink to be like red, blue or any other color?
Resources (screenshots, code snippets etc.)
Jakub Chmura staff answered 5 years ago
Hi @Jasoniyi,
If you want to change the color of NavLink you need to use a className
. You can read more about it HERE.
Unfornutaly we didn't have a prop to change the color of an active element. You need to wrote your custom CSS style to change it.
From MDB 4.22.0 version you can use MDBNavLink
as a NavLink
from react-router-dom
or as a normal Link
from react-router-dom
by using a link
props.
I wrote a simple snippet to show you how to change the color of MDBNavLink
with NavLink
's and Link
's and how to use NavLink and Link.
import React, { Component } from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBNavLink } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';
class NavLinkEg extends Component {
render() {
return (
<Router>
<MDBContainer>
<MDBRow>
<MDBCol>
<MDBNavLink to='#' className='red-text'>
NavLink color: className='red-text'
</MDBNavLink>
<MDBNavLink to='#' className='pink-text'>
NavLink color: className='pink-text'
</MDBNavLink>
<MDBNavLink to='#' className='purple-text'>
NavLink color: className='purple-text'
</MDBNavLink>
<MDBNavLink to='#' className='deep-purple-text'>
NavLink color: className='deep-purple-text'
</MDBNavLink>
<MDBNavLink to='#' className='indigo-text'>
NavLink color: className='indigo-text'
</MDBNavLink>
<MDBNavLink to='#' className='blue-text'>
NavLink color: className='blue-text'
</MDBNavLink>
<MDBNavLink to='#' className='light-blue-text'>
NavLink color: className='light-blue-text'
</MDBNavLink>
<MDBNavLink to='#' className='cyan-text'>
NavLink color: className='cyan-text'
</MDBNavLink>
<MDBNavLink to='#' className='teal-text'>
NavLink color: className='teal-text'
</MDBNavLink>
<MDBNavLink to='#' className='green-text'>
NavLink color: className='green-text'
</MDBNavLink>
</MDBCol>
<MDBCol>
<MDBNavLink link to='#' className='light-green-text'>
Link color: className='light-green-text'
</MDBNavLink>
<MDBNavLink link to='#' className='lime-text'>
Link color: className='lime-text'
</MDBNavLink>
<MDBNavLink link to='#' className='yellow-text'>
Link color: className='yellow-text'
</MDBNavLink>
<MDBNavLink link to='#' className='amber-text'>
Link color: className='amber-text'
</MDBNavLink>
<MDBNavLink link to='#' className='orange-text'>
Link color: className='orange-text''
</MDBNavLink>
<MDBNavLink link to='#' className='deep-orange-text'>
Link color: className='deep-orange-text'
</MDBNavLink>
<MDBNavLink link to='#' className='brown-text'>
Link color: className='brown-text'
</MDBNavLink>
<MDBNavLink link to='#' className='grey-text'>
Link color: className='grey-text'
</MDBNavLink>
<MDBNavLink link to='#' className='blue-grey-text'>
Link color: className='blue-grey-text'
</MDBNavLink>
<MDBNavLink link to='#' className='mdb-color white-text'>
Link color: className='mdb-color white-text'
</MDBNavLink>
</MDBCol>
</MDBRow>
</MDBContainer>
</Router>
);
}
}
export default NavLinkEg;
If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.
Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.22.0
- Device: pc
- Browser: chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Jasoniyi free commented 5 years ago
and also the active class to something other than the lightly-dark colored box, maybe something like giving the active link some other color