Sometimes you might want to understand where an element in your component is receiving its styling from, and this isn't always easy to do when projects can contain multiple stylesheets with many rules. The Computed Styles panel in Codux makes it easy to visually understand which styles are applying what styling to the elements in your components.

The information laid out in this panel makes it a helpful place to copy styles from, and to jump straight to the areas in the Styles panel or code drawer to make any changes.

To see the computed styles of an element, select the element from a board in your project, and click on the Computed Styles panel tab on the right.

For example, you might want to check that one of your elements — a button, is using the same hover color that you included in the initial design. Switch to Select mode to select the element, and then open the Computed Styles panel where you'll see all the styles that the button is using. From there, you can select the color style that you want to change to make the updates in the Styles pane, or in the code drawer.

After you've made your changes, you can commit them and create a pull request with Git for other project users to see.

🔍 Use the Search Properties bar at the top of the Computed Styles panel to effectively narrow down the results to only the CSS properties that match your query.

Codux categorizes CSS properties into the following groups of styles:

There is also an Others category that includes the styles detected by Codux that didn't fit into the other ones.