react_on_rails：不使用外部 CSS 样式答案

【问题标题】：react_on_rails: not working with external css stylereact_on_rails：不使用外部 CSS 样式
【发布时间】：2017-12-02 17:30:14
【问题描述】：

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

【问题讨论】：

标签： ruby-on-rails reactjs react-select react-on-rails

【解决方案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} />

【讨论】：