Skip to main content

How to Get Component Styles

You may need to get the current component styles while it is running, for example, when an event happens.

To get CSS styles for a component, call the getComputedStyle function where you want to transfer the desired HTML element. As a result, you get a styles object which contains all the styles applied to the component.

Let's take, for example, the Link component from the @quarkly/widgets library and get its color when mousing over it:

const onEnterEvent = (e) => {
const styles = getComputedStyle(;
return (
<Link onMouseEnter={onEnterEvent} {...props}>
Blue link

Note: Use the getComputedStyle function only to get styles added from the builder interface or third-party libraries. The styles you added in a component can be retrieved from the object.

Please also note that the getComputedStyle function returns the object with the standard style names written with a hyphen (e.g. background-color), while the object uses the names as backgroundColor as if you were transferring them in any component.