Requirements for theme-overrides at component level

[pac0rro]

Hi all.

I wonder what are the requirements I must comply in order to get working ":theme-overrides" at component level.

This piece of code doesn't work:

<n-input-number size="tiny" class="axisWeight" :bordered="false"  :theme-overrides="naiveStyles.axisWeightInput"/>

However, wrapping it in a n-config-provider tag works as expected.

<n-config-provider :theme-overrides="naiveStyles.axisWeightInput">
     <n-input-number size="tiny" class="axisWeight" :bordered="false" />
</n-config-provider>

I'm not developing under typescript, but the documentation points to an example coded in TS.

Using latest version 2.25.1.

Thanks in advance.

[07akioni]

It should work. Please paste full naiveStyles.axisWeightInput here.

[07akioni]

Thanks, @07akioni.

This is the javascript that i've loaded as globalProperties:

export default {
    axisWeightInput: {
        color: "rgba(249, 0, 0, 0)",
        colorFocus: "#F81FA5EB",
        fontSizeTiny: "8px"
    }
};

I don't think this is a valid global theme overrides.

[07akioni]

It shouldn't work at both global level or component level

[pac0rro]

Yes, you are right. I have to change it when using "n-config-provider" tag to this:

export default {
    axisWeightInput: {
        Input: {
            color: "rgba(249, 0, 0, 0)",
            colorFocus: "#F81FA5EB",
            fontSizeTiny: "8px"
        }
    }
};

... in order to get it work.

Is there something I must activate to get it work at component level?

[07akioni]

[pac0rro]

Ohhhh, sorry. I didn't catch it. For nested components I must specify the styles with "peers"

This is the final config for component-level styles, following your advice:

export default {
    axisWeightInput: {
        peers: {
            Input: {
                color: "rgba(249, 0, 0, 0)",
                colorFocus: "#F81FA5EB",
                fontSizeTiny: "8px"
            }
        }
    }
};

Thank you very much!, @07akioni.

This UI framework is amazing!