Styles are missing for the component

[sarada-Cheukupalli]

Hi

I just installed this component and tried to run and noticed that it's missing a few styles. I don't see the arrow in select input and the expander symbols for opening and closing the data items. Also, only if I search for a keyword, it would expand the data items as shown in the screen-shots. Please advise!

Thanks!

[aseroj]

what are you using for the templating ? (e.g. bootstrap, reactstrap, material)

[sarada-Cheukupalli]

I'm using the Vanilla (no framework)

[aseroj]

I'd suggest following the original documentation for styling guides.
Also checkout the examples provided, although there aren't any for vanilla, but you'll get the gist of it.

[mrchief]

@sarada-Cheukupalli When you do

import DropdownTreeSelect from 'react-dropdown-tree-select'

a bundler like webpack will also import the styles, provided you allow for it:

// allow webpack to import/bundle styles from node_modules for this component
module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
          loader: 'css-loader'
        }]
      }),
      include: /node_modules[/\\]react-dropdown-tree-select/
    }
  ]
}

This will suffice to include vanilla/default styles.

If you want to use it with frameworks like Bootstrap/material, you'll also need to provide (in addition to allowing the default styles) some framework specific overrides with your own CSS. E.g. checkout the examples for bootstrap and material-design.

The 3rd option, as pointed out by @aseroj, is to completely come up with your own style - and the documentation provides the CSS skeleton that you need to implement to do so.

[mrchief]

Another option to include styles (if you're not using webpack or any bundler) is to reference them from a CDN: https://unpkg.com/react-dropdown-tree-select@1.0.6/dist/styles.css