react_on_rails：不使用外部CSS样式

Question

我使用react_on_rails gem来处理与rails的反应。我正在尝试使用react-select进行React select控件。但是当我导入并使用时：

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;

但看起来css没有应用。在Chrome控制台上查看时，我看不到任何css适用。

我认为react_on_rails不适用于库的反应组件中的某些资产。请告诉我怎么做。

Answer 1

将复杂样式应用于使用react-select的组件可能很困难。您应该尝试导入styled-components来为您的组件创建主题。依赖项的Github页面是正确的here。

以下是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} />