React-starter-kit: How to use third party library.

[Ranushka]

how to Import third party library. like https://github.com/JedWatson/react-select.

[frenzzy]

The same as described in their docs:

// YourComponent.js
import Select from 'react-select';
import reactSelectCss from 'react-select/dist/react-select.css';

// ...

export default withStyles(reactSelectCss)(YourComponent);

[Ranushka]

@frenzzy, Thank you for the quick response .
apparently i have done the same, I taught I'm doing some thing wrong,
I would like to know how to override the styles on a (third party library) component instance.
React select give a option to add a custom class to the outer container.
Thanks in advance.

[slackday]

I don't know if this applies to the version of RSK you are using but I'm also using react-select in a project. After importing default styles I overwrite it with for example

:global(.Select-menu-outer) {
  z-index: 100;
}

In my own stylesheet

[frenzzy]

/* MySelect.js */
import React from 'react';
import Select from 'react-select';
import reactSelectCss from 'react-select/dist/react-select.css';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './MySelect.css';

class MySelect extends React.Component {
  render() {
    return <Select {...this.props} className={s.root} />;
  }
}

export default withStyles(reactSelectCss, s)(MySelect);

/* MySelect.css */
.root { margin-bottom: 1rem; }
:global(.Select-control) { border-color: red; }
:global(.Select-placeholder) { color: red; }

/* or */
.root { margin-bottom: 1rem; }
.root :global(.Select-control) { border-color: red; }
.root :global(.Select-placeholder) { color: red; }

/* or */
.root { margin-bottom: 1rem; }
:global {
  .Select-control { border-color: red; }
  .Select-placeholder { color: red; }
}

/* or */
.root {
  margin-bottom: 1rem;
  :global {
    .Select-control { border-color: red; }
    .Select-placeholder { color: red; }
  }
}

[Ranushka]

👍 :) @slackday , @frenzzy .
It works. Thank you.