Nuxt•4d ago

Nuxt UIHow to override component defaults

Hello, I am trying to override a component's styling but I am kind of failing to do so. This is my app.config.ts I made everything red so that it's easy to notice if it actually changes anything but it doesn't. Am I configuring something wrong? Also I tried to apply the classes on the component itself with [&_.inactive]:text-red-800 but that also didn't work. How can I do this? Thank you.

export default defineAppConfig({
    ui: {
        primary: 'green',
        gray: 'slate',
        horizontalNavigation: {
            inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500',
            active: 'text-red-900 dark:text-red-800'
        }
    }
})

export default defineAppConfig({
    ui: {
        primary: 'green',
        gray: 'slate',
        horizontalNavigation: {
            inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500',
            active: 'text-red-900 dark:text-red-800'
        }
    }
})

3 Replies

kapa.ai•4d ago

Hi @Tunanika. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To override component defaults in Nuxt UI, you're on the right track with using the app.config.ts file. However, the structure of your configuration needs a slight adjustment. Here's how you can correctly override the HorizontalNavigation component's styling:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    horizontalNavigation: {
      wrapper: 'relative w-full flex items-center justify-between',
      base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
      active: 'text-red-900 dark:text-red-800',
      inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500'
    }
  }
})

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    horizontalNavigation: {
      wrapper: 'relative w-full flex items-center justify-between',
      base: 'group relative w-full flex items-center gap-1.5 px-2.5 py-3.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75',
      active: 'text-red-900 dark:text-red-800',
      inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500'
    }
  }
})

The key difference is that you need to nest the active and inactive classes under the horizontalNavigation object, which should be directly under the ui object. This configuration should apply the red colors you've specified to the HorizontalNavigation component. If you're still not seeing the changes, make sure that: 1. Your app.config.ts file is in the root of your Nuxt project. 2. You've restarted your Nuxt development server after making changes to the app.config.ts file. If you want to override styles for a specific instance of the component, you can use the ui prop directly on the component:

<UHorizontalNavigation
  :ui="{
    active: 'text-red-900 dark:text-red-800',
    inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500'
  }"
  :links="yourLinks"
/>

<UHorizontalNavigation
  :ui="{
    active: 'text-red-900 dark:text-red-800',
    inactive: 'text-red-500 hover:text-red-900 dark:text-red-800 dark:hover:text-red-500'
  }"
  :links="yourLinks"
/>

This approach allows you to customize the styling for individual instances of the component. For more detailed information on theming and customizing components, you can refer to the Nuxt UI Theming documentation (https://ui.nuxt.com/getting-started/theming#components). Nuxt UI Pro Getting Started - Theming (https://ui.nuxt.com/pro/getting-started/theming) also provides additional insights into customizing components, especially if you're using Nuxt UI Pro. Remember that Nuxt UI uses tailwind-merge (https://github.com/dcastil/tailwind-merge) to smartly merge the classes, so your custom classes should override the default ones without conflicts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@561256614594871307> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TunanikaOP•4d ago

Oh cool bot that actually nows nuxt That completely worked thanks! I should look into the documentation next time maybe I just saw it in the documentation too🙃

Gaming

Programming

Nuxt UIHow to override component defaults

Did you find this page helpful?