If the component (Item) already has the variables set, that they are of higher specificity than the wrapper's (Var), therefore, rendering the Var's variables ineffective.
Also, it has the undesired side-effect of having to wrap the DOM element using a div that its whole function is solely to have the variables as class. This method is dirty since you can achieve the same result without the unnecessary div wrapper element, but by simply adding another class, via Styled-components, which will only host the variables.
If the component (Item) already has the variables set, that they are of higher specificity than the wrapper's (Var), therefore, rendering the Var's variables ineffective.
Also, it has the undesired side-effect of having to wrap the DOM element using a
divthat its whole function is solely to have the variables asclass. This method is dirty since you can achieve the same result without the unnecessarydivwrapper element, but by simply adding another class, via Styled-components, which will only host the variables.I've made an example:
codesandbox.io/s/styled-components...