Theme customization through classes

[ChronicStone]

This function solves the problem (这个功能解决的问题)

The current theming system, while being really complete, is really inconvenient to use in practice. Fully customizing the whole library to match your own graphical chart while being consistent really is something hard to do. In addition, it is totally impossible to use utility-based CSS frameworks like WindiCSS, TailwindCSS, or the more recent UnoCSS engine.

Expected API (期望的 API)

The idea would be to offer two customizations API. The first one is the one already implemented, allowing you to set each single CSS property for each component, and all of its variants.

The new customization API, would be based on each component's DOM Tree, and would allow us to pass classes for each of the elements composing a component.

For example, here's what it could potentially look like for the Input component :

const themeConfig = {
    NInput: {
        NInputWrapper: "aClass anOtherClass",
        NInputInput: "...",
        NInputPlaceholder: "text-red-500", // utility-based styling
        NInputBorder: "",
        NInputStateBorder: ""
    }
}

I don't know precisely the DOM Tree structure of components on Naive UI, so I don't really know the if this is something potentially doable, and moreover something that'd be convenient to use in practice, but I think I'd be really interesting to discuss about this. It may not be the right approach, but finding a way to be able to customize Naive UI entirely using utility-based CSS framework, or custom classes, would be a great plus to add to this already excellent component library

Let me know what you think about this, or any alternative ideas that you might have !

[07akioni]

In fact I don't think the two approaches can be achieved without compromise. There are conflicts in implementation layer.

The utility based css are more convient for component without much nested level DOM structure. For example some basic blocks with native data element can achieve great ux in a not complexing scene like blog, landing pages. However when it comes to component library, we need hundred lines of css to be applied in a tiny block. Their influence is subtle. We can't easily give you a percise DOM element that let you define class on it to achieve your goal.

If you are interested, have a look at n-data-table's DOM structure, you will find it's nearly impossible to make the style change as you like by simply appling some classes on it.

[ChronicStone]

Hi @07akioni.

I gave me a bit of time to really think about this and dive deeper in the components DOM tree, and I now I realize you're right, providing such way of theming Naive UI does not make actual sense. It would be probably way harder than through the CssProp config that currently exists for some components.

Thanks for your answer, I guess this does not need to stay open