I am new to React and not quite sure how some plugins/components handle CSS.
I am aware of how to use the styleNames prop with the React Select component. However, I want to use it to inject existing utility classes from my site’s existing .css file. I can do this, as per below, but this adds my classes alongside React Select’s default classes and React Select’s default classes override mine.
For example, if I set singleValue color class to be my .color-primary utility class, as such:
<Select
onChange={(selectedOption) => onChange({ name: name, value: selectedOption.value }, true)}
options={options}
classNames={{
singleValue: () => 'color-primary',
}}
name={name}
/>
The HTML I get for that element is:
<div class="color-primary css-1dimb5e-singleValue">Option 1</div>
Which is fine, but the color specified in .css-1dimb5e-singleValue, which seems to come from a <style> tag injected at the bottom of <head> overrides the color specified in .color-primary which appears in my normal .css file higher up in the <head>.
I know I could use specificity (eg .my-select .color-primary) or create my own SCSS file for my component, but I’d rather just use my existing utility classes already in the site for now.
Would anyone know of a way around this?