React Select 2 - Portal menu positioning

Question

Is it possible to take control of React-Select 2's menu positioning? I'm using it inside React Virtualized table rows but then I'm rendering the dropdown to a portal outside of the row. I have set menuPosition to fixed but React-Select 2 has delayed automatic positioning which is far too slow, so I would like to take control of the positioning myself.

Answer 1

You can override the Components styles by adding a styles prop to your Select, targeting the component. React-Select uses emotionCSS for styling, rather than classes, so it can key off of state changes.

const styles = {
  menuPortal: (base, state) => {
    let overrideProps = {};
    // do something here 
    return Object.assign(base, overrideProps);
  }
};

<Select styles={styles} />

You can find additional info in the Styles section of the documentation.