react_on_rails: not working with external css style

Question

I'm using react_on_rails gem for working react with rails. I am trying to use react-select for React select control. But when I import and use:

import {Async} from 'react-select';
class TransferProduct extends React.Component {

  constructor(props) {
    super(props);
  }

  handleChange = (selectedOption) => {
    console.log(`Selected: ${selectedOption.label}`);
  }

  render() {
    const getOptions = (input, callback) => {
      setTimeout(() => {
        callback(null, {
          options: [
            {value: 'one', label: 'One'},
            {value: 'two', label: 'Two'}
          ],
          complete: true
        });
      }, 500);
    };
    return (
        <div className="TransferProduct">
          <Async
              className="ProductList"
              name="form-field-name"
              loadOptions={getOptions}
          />
        </div>
    );
  }
}

export default TransferProduct;

But it looks like css not applying. I don't see any css apply when view on chrome console.

I think react_on_rails not works with some assets in library's react component. Please tell me how.

Answer 1

Applying complex styling to a component that uses react-select can be difficult. You should try importing styled-componentsto create a theme for your component. The Github page for the dependency is right here.

Here is an example provided by jole78:

   import React from "react";
   import ReactSelect from "react-select";
   import styled from 'styled-components';

   const MultiSelect = styled(ReactSelect)
     &.Select--multi  {

       .Select-value {
          display: inline-flex;
          align-items: center;
       }    

     }

     & .Select-placeholder {
        font-size: smaller;
     }

  export (props) => <MultiSelect multi {...props} />