naive-ui/demo/documentation/components/element/enUS/basic.md

Basic

When n-config-provider provides dark theme, it applies n-dark-theme class on n-element. When n-config-provider provides light theme, it applies n-light-theme class on it. If neither, it won't apply any additional class on it. Just like other themed Naive UI components.

It is very useful to create themed component.

<n-element as="span" class="myel">
  My Element
</n-element>

.myel {
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.myel.n-light-theme {
  color: green;
}

.myel.n-dark-theme {
  color: yellow;
}