如何设置React-Select组件的样式，使其具有以下结构？

Question

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

当前类似于

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

我想做的是

我实现的就是这样

那么，有人可以帮我吗？

Answer 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。