Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Override classes

Palak@tru free asked 5 years ago


I want to override classes in tab components. For example, in the Tab component, there is a class called 'active' which controls the bottom border under the active tab. How to override that class like this, .classic-tabs .nav li a.active { border-bottom: 5px solid blue !important; transition: width 1s ease, 0.5s ease !important; } .How to achieve that?


Konrad Stępień staff answered 5 years ago


Hi @Palak@tru,

if I understand correctly you want sets your own styles for class.

These styles do not work?

 .classic-tabs .nav li a.active { 
    border-bottom: 5px solid blue !important; 
    transition: width 1s ease, 0.5s ease !important
 }

Please make you sure you correctly and in the right order you imported styles, like this:

import React from 'react';
import ReactDOM from 'react-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Please tell me if problem still exists.

Best regards, Konrad.



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: MacBookAir
  • Browser: Chrome
  • OS: Mac
  • Provided sample code: No
  • Provided link: No