0

我正在使用react_on_rails gem 与 rails 一起工作。我正在尝试将react-select用于 React 选择控件。但是当我导入和使用时：

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 不适用于库的反应组件中的某些资产。请告诉我怎么做。

4

1 回答 1

0

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

这是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} />
于 2017-12-03T00:36:27.950 回答