Search code examples
nebular

How to customize Nebular component style if it is not mapped to a theme variable

I know how to change the theme variables to customize a component but, what should I do when there is no theme variable to change?

enter image description here

Solution

  • Short answer If you want to edit card-border-width, then just edit it the same way you would edit the theme variables.

    card-border-width: 0;

    Long answer Think of Name and Theme variables as scss variables, programming wise there's really no hierarchy as they can be edited and combined in any ways. Take card-text-color for instance.

    text-basic-color: #222b45;
card-text-color: text-basic-color;

    Now if you would like to change the card-text-color, could edit either text-basic-color or card-text-color for the same result. Change card-text-color if you only want this settings to be applied to cards. Change text-basic-color if you want to all components (the whole theme) to inherit the color. In the case of card-border-width, there is not theme variable so just edit card-border-width.