How to Create an Override List
The list of all overrides used in the component is described in the object called overrides. The object properties correspond to custom override names and can contain the kind and props fields. You decide which components and states can be changed.
For example, let's add an override called "My Link" for a Link component and give it the src property:
The kind property allows you to use a set of properties from another component. To do this, you must specify the system name of a standard or custom existing component. Then the properties of this component will be available on the Props panel in the builder. In the example above, we created a custom component with a link and now we want to add properties to it from the Link component. The kind: 'Link' property is added automatically.
In the props object, you can specify a list of CSS styles and any props you'd like to transfer to the component with this override name.
To describe a property, just set the property name and value, as in the src example.
And the CSS styles can be described in different ways:
- standard description
color: '#212121' - aliases from the Atomize library
c: '#212121' - variables from the project theme
color: '--color-dark'color: '--dark' - breakpoints from the project theme
'md-color': '#212121' - state effects
'link-color': '--primary''focus-color': '--secondary''hover-color': '--orange''active-color': '--red''visited-color': '--indigo'
So the object with the description of overrides might look like this: