I am trying to pass a CSS class from the parent component into the child component. Here is an example:
<Parent>
<Child />
</Parent>
In order to apply a class from the parent to the <Child />, I have done this:
<Parent>
<Child className={ styles.pill } />
</Parent>
The <Child /> uses the className prop and applies the class using the classnames package, like so:
<div className={ classNames(styles.pill, props.className) } />
However, there seems to be a conflict with the styles of the <Child />. The class passed in from the parent and the styles defined within the Child component are causing unpredictable results, with each build of the project.
How can I make sure that the CSS properties from the parent class override any conflicting properties in the Child component?