I have a react component that accepts the size prop as either small, regular, or large. Depending on the size, a specific CSS class is assigned to style the component accordingly. Here's an example of how these classes are defined:
.my-component {
&--small-size .column {
height: 40px;
}
&--regular-size .column {
height: 60px;
}
&--large-size .column {
height: 80px;
}
}
The issue arises when nesting these components (as shown below), where the nested component inherits the size of its parent instead of having independent styles - this appears to be a CSS limitation.
Is there a way to address this problem so that nested components always maintain their own unique styles?
const Page = (props) => {
return (
<MyComponent size="regular">
{/* Other HTML elements*/}
<MyComponent size="small">
...
</MyComponent>
</MyComponent>
);
};