# Handling Breaking Changes in themeStyleOverrides

## Environment

<table>
	<tbody>
		<tr>
			<td>Product Version</td>
			<td>02/09/2023</td>
		</tr>
		<tr>
			<td>Product</td>
			<td>ThemeBuilder</td>
		</tr>
	</tbody>
</table>

## Description

How can I handle breaking changes in the `themeStyleOverrides` when migrating an existing ThemeBuilder project to the latest version of the Telerik and Kendo UI themes?

I imported my project's metadata into a new ThemeBuilder project that uses the latest version of the themes as a base, but I see compilation errors and some styles that I cannot change through ThemeBuilder.

## Solution

The issue is caused by breaking changes that affect the `themeStyleOverrides` in the ThemeBuilder project.

To fix the compilation errors and remove any styles that you cannot modify in ThemeBuilder:

1. Remove all broken or changed `themeStyleOverrides`:

   1. [Export the metadata](https://www.telerik.com/themebuilder/documentation/basic-project-operations/import-export-metadata#exporting-metadata) of the project that you want to migrate to a new version of the Telerik and Kendo UI themes.

   2. Extract the `.zip` file to a local folder and open the `data.json` file in a text editor.

   3. Expand the `themeStyleOverrides` object that contains all your custom style overrides.

   4. In ThemeBuilder, open the new project with the migrated styles. Locate any component parts with unexpected styles. If you cannot find this unexpected style in any of the editors in the **PROPERTIES** pane, you've identified a broken object in the `themeStyleOverrides`.

   5. In the `themeStyleOverrides`, delete the entire object to remove it from the imported styles.

   For example, in the following `themeStyleOverrides` object, `.k-this-style` is renamed to `.k-that-style` in the latest Telerik and Kendo UI theme. This leaves a `.k-this-style` selector in the exported `.sass` and `.css` files. To remove the selector, locate the object with the name `k-this-style` and remove it from the `themeStyleOverrides` object.

   ```json
       "themeStyleOverrides": {
           "k-this-style": {
               "classes": [
                   ".k-k-this-style"
               ],
           ...other data omitted
               "selector": ".k-this-style"
           },
           "k-button": {
               "classes": [
                   ".k-button"
               ],
               ...other data omitted
               "selector": ".k-button"
           }
       }
   ```

2. Import the migrated metadata:

   1. Create a new ThemeBuilder project.

   2. Create a ZIP file that contains the `data.json` file that you modified.

   3. From the newly created ThemeBuilder project, navigate to the [toolbar](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#themebuilder-toolbar) and select the project menu drop-down.

   4. Select **Import Metadata**.

   5. Upload the ZIP file with the modified metadata of the project that you want to migrate.

After refreshing the app, you can continue with your styling.

## Related Articles

* [Handling Breaking Changes in Variables](https://www.telerik.com/themebuilder/documentation/knowledge-base/variables-breaking-changes)
* [Migrating Projects to New Theme Versions](https://www.telerik.com/themebuilder/documentation/working-with-kendo/migrating-projects)