Styling dropdown components

[helebo]

Hi! I've found your styling in src/styles/dropdown.sass, however I'm not sure how to target the classnames for custom syling.
Having this component for example:

...
import { DropdownMultiple } from 'reactjs-dropdown-component';

import classes from './DropdownHosts.module.css';
...
const fruits= [
    { id: 1, name: "Banana" },
    { id: 2, name: "Apple" },
    { id: 3, name: "Orange" },
  ];
...
 <DropdownMultiple className={classes.dropdownFruit}
            name='fruits'
            title='Select fruit(s)'
            titleSingular='fruit'
            searchable={["Search for fruit", "No matches"]}
            list={fruits}
            onChange={dropdownHostHandler}
            />

In css file I'm not able to target tha individual classes by this syntax

.dropdownFruit  .dd-header-title{
    font-size: medium;
    color: rgb(116, 184, 103);
}

.dropdownFruit  .dd-list-item{
    font-size: medium;
    color: rgb(116, 184, 103);
}

as you mention one should in your Readme file "Note that styles prop is meant for basic styling. Use stylesheet by targeting the specific class names for more complicated stylings.". How should one target elements to make more complicated styling?

[dbilgili]

Hey Helene,

These components do not pass down the className prop. So, using it has no effect.
You should import a styling file which targets the class names directly. Note that I am not using css modules here, instead injecting the css directly.

Keep in mind that in some cases you might possibly need to use !important to override stylings.

Check out this example.