How to override the style for a component

If you want to change the style of a component in a migrated application, you can write some css code in the styles.css file that exists in src\styles.css.

Sample 1

If you have the sks project migrated, and you want to modify the background-color for all the window content in the app, you write this code in the styles.css file.

kendo-window .k-window-content > div {
    background-color: greenyellow !important;
}

Save the change of styles.css, and build the frontEnd project with ng build.

You can have the .net project running. To see the change, you just have to compile the client project and reload the browser.

The css selector search for the Kendo-Window elements, this element is the Kendo component that renders the content within a div. Sometimes you will need to use the !important statement to force the use of the css you wrote.

The !important statement override all the others rules. except the inline rules.

Sample 2

If you have the sks project migrated, and you want to modify the border-radius for all the buttons in the app, you write this code in the styles.css file.

wm-button  >button {
    border-radius: 30px !important;
}