react_on_rails：不适用于外部css样式

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用react_on_rails gem与rails进行工作反应。我正尝试使用react-select作为React选择控件。但是当我进口和使用：react_on_rails：不适用于外部css样式

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不适用于库反应组件中的一些资产。请告诉我如何。

回答：

将复杂样式应用于使用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} />

以上是 react_on_rails：不适用于外部css样式 的全部内容， 来源链接： utcz.com/qa/257504.html

回到顶部