change color of MDBNavLink


Topic: change color of MDBNavLink

Jasoniyi 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.)


Jasoniyi 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


Jakub Chmura staff premium 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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: 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
Tags