如何设置 React-Select 组件的样式以获得以下结构？

【问题标题】：How do I style the React-Select component do get the following structure?如何设置 React-Select 组件的样式以获得以下结构？
【发布时间】：2019-01-18 10:31:18
【问题描述】：

我正在尝试向 React 选择组件添加一些自定义 CSS。

目前是这样的，

<Select styles={styles} options={options} />

我想做的是

我实现的是这样的

那么，谁能帮我解决这个问题？

【问题讨论】：

标签： css reactjs bootstrap-4 react-select

【解决方案1】：

要实现您的风格，您需要使用自定义 styles 和 components 的组合，如下所示：

const styles = {
  container: base => ({
    ...base,
    flex: 1
  }),
  control: base => ({
    ...base,
    boxShadow: '10px 10px 5px -6px rgba(0,0,0,0.46)',
  }),
  indicatorSeparator: base => ({
    ...base,
    display: 'none'
  }),
  placeholder: base => ({
    ...base,
    color: 'blue'
  })
};

const Placeholder = (props) => {
  return (
    <components.Placeholder {...props}>
    None selected
    </components.Placeholder>
  );
};

<Select styles={styles} components={{Placeholder}} options={options} />

我认为这与您举的例子非常接近。这里是live version。

【讨论】：