Needed css imports for mdb-react-ui-kit 1.5.0


Topic: Needed css imports for mdb-react-ui-kit 1.5.0

bgining2this asked 7 months ago

Get styles for mdb-react 1.5.0 import css

Dont know what css import for mdb-react-ui-kit 1.5.0

imported already bootstrap-css-only version 4.4.1

I am actually trying to implement the navbar component but the css doesnt work, also how can i programatically switch between light and dark navbars ?


Wojciech Staniszewski staff answered 7 months ago

You need to have this line in the index.js file:

import "mdb-react-ui-kit/dist/css/mdb.min.css";

If you want to use a dark theme, just add the dark property to the MDBNavbar component.


bgining2this commented 7 months ago

Thank you, but i want to be able to switch between dark and light mdbnavbar, because i have a general setup for dark mode and light mode in all the pages


Krzysztof Wilk staff answered 7 months ago

Hi!

You can change the dynamically dark or light mode of your Navbar using state management and events. Check the example below:

import React, { useState } from 'react';
import {
  MDBContainer,
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarToggler,
  MDBIcon,
  MDBNavbarNav,
  MDBNavbarItem,
  MDBNavbarLink,
  MDBBtn,
  MDBDropdown,
  MDBDropdownToggle,
  MDBDropdownMenu,
  MDBDropdownItem,
  MDBDropdownLink,
  MDBCollapse
} from 'mdb-react-ui-kit';

export default function App() {
  const [showBasic, setShowBasic] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
        <MDBContainer>
      <MDBNavbar expand='lg' dark={isDarkMode} light={!isDarkMode} bgColor={isDarkMode ? 'dark' : 'light'}>
        <MDBContainer fluid>
          <MDBNavbarBrand href='#'>Brand</MDBNavbarBrand>

          <MDBNavbarToggler
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
            onClick={() => setShowBasic(!showBasic)}
          >
            <MDBIcon icon='bars' fas />
          </MDBNavbarToggler>

          <MDBCollapse navbar show={showBasic}>
            <MDBNavbarNav className='mr-auto mb-2 mb-lg-0'>
              <MDBNavbarItem>
                <MDBNavbarLink active aria-current='page' href='#'>
                  Home
                </MDBNavbarLink>
              </MDBNavbarItem>
              <MDBNavbarItem>
                <MDBNavbarLink href='#'>Link</MDBNavbarLink>
              </MDBNavbarItem>

              <MDBNavbarItem>
                <MDBDropdown>
                  <MDBDropdownToggle tag='a' className='nav-link'>
                    Dropdown
                  </MDBDropdownToggle>
                  <MDBDropdownMenu>
                    <MDBDropdownItem>
                      <MDBDropdownLink>Action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink>Another action</MDBDropdownLink>
                    </MDBDropdownItem>
                    <MDBDropdownItem>
                      <MDBDropdownLink>Something else here</MDBDropdownLink>
                    </MDBDropdownItem>
                  </MDBDropdownMenu>
                </MDBDropdown>
              </MDBNavbarItem>

              <MDBNavbarItem>
                <MDBNavbarLink disabled href='#' tabIndex={-1} aria-disabled='true'>
                  Disabled
                </MDBNavbarLink>
              </MDBNavbarItem>
            </MDBNavbarNav>

            <form className='d-flex input-group w-auto'>
              <input type='search' className='form-control' placeholder='Type query' aria-label='Search' />
              <MDBBtn color='primary'>Search</MDBBtn>
            </form>
          </MDBCollapse>
        </MDBContainer>
      </MDBNavbar>

      <MDBBtn className='mt-5 me-4' onClick={() => setIsDarkMode(false)}>Light mode</MDBBtn>
      <MDBBtn className='mt-5' onClick={() => setIsDarkMode(true)}>Dark mode</MDBBtn>
    </MDBContainer>
  );
}

Keep coding!


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: MDB5 1.4.0
  • Device: Desktop
  • Browser: Browser
  • OS: Linux
  • Provided sample code: No
  • Provided link: No