How can I style a Flowbite React component?

59 views Asked by At

I am using flowbite-react in my react project. I am using the Sidebar component. I am able to style the text of each button in the sidebar using regular tailwind classes, but I can't figure out how to style the icons. No classes work.

Here is the sidebar code:

<Sidebar>
      <Sidebar.Items>
        <Sidebar.ItemGroup>
          <Link to='/dashboard'>
            <Sidebar.Item
              icon={AiOutlineHome}
              className='text-sm text-stone-800'
              style={{ color: '#000' }}
            >
              Home
            </Sidebar.Item>
          </Link>
          <Link to='/dashboard/item'>
            <Sidebar.Item
              icon={HiOutlineTemplate}
              className='text-sm text-stone-800'
            >
              Templates
            </Sidebar.Item>
          </Link>
          <Link to='/dashboard/orders'>
            <Sidebar.Item
              icon={MdOutlineShoppingCart}
              label='3'
              className='text-sm text-stone-800'
            >
              Orders
            </Sidebar.Item>
          </Link>
          <Link to='/dashboard/customers'>
            <Sidebar.Item icon={BsPeople} className='text-sm text-stone-800'>
              Customers
            </Sidebar.Item>
          </Link>
        </Sidebar.ItemGroup>

        <Sidebar.ItemGroup>
          <Link to='/dashboard/library'>
            <Sidebar.Item
              icon={BsBookmarkHeart}
              className='text-sm text-stone-800'
            >
              Library
            </Sidebar.Item>
          </Link>
          <Link to='/settings'>
            <Sidebar.Item icon={BsGear} className='text-sm text-stone-800'>
              Settings
            </Sidebar.Item>
          </Link>

          <Link to='/dashboard/item/digital' className='w-full mt-2'>
            <button className='w-full text-stone-800 text-sm bg-gray-200 rounded-md p-1 flex items-center justify-center'>
              New +
            </button>
          </Link>
        </Sidebar.ItemGroup>
      </Sidebar.Items>

      {!currentUser?.stripeOnboard && !currentUser?.bankAdded && (
        <Sidebar.CTA>
          <div className='mb-3 flex items-center'>
            <Badge color='failure'>Payouts disabled</Badge>
          </div>
          <div className='mb-3 text-sm text-stone-800 dark:text-gray-400'>
            You need to add a payout option in settings before you can submit a
            template.
          </div>
          <Link
            className='text-sm text-stone-800 underline hover:text-cyan-800 dark:text-gray-400 dark:hover:text-gray-300'
            to='/settings'
          >
            Settings
          </Link>
        </Sidebar.CTA>
      )}
    </Sidebar>

I want to make the icons for each sidebar item smaller and I want to be able to change the color.

0

There are 0 answers