将自定义样式应用于react-select＆amp;最佳实践

Question

基本上，我想用反应选择组件维护输入字段的样式。我已经了解到样式组件将是最好的行动方案，但我仍然不确定要改变哪种样式以获得我想要的结果。我想删除边框，聚焦发光，并使其内联，同时保留其他所有内容。我会更改.Select-menu-outer？

Here is an example of one of my custom input fields

Here is my css style

Answer 1

您可以查看有关react-select的文档以对其组件进行样式设计。

const customStyles = {
  container: base => {(
    ...base,
    backgroundColor: {/* Your color */}
  )},
  option: base => {(
    ...base,
    backgroundColor: {/* Your color */}
  )}
}

<Select styles={customStyles} />

您可以由此设置react-select的许多组件的样式。您只需要定位正确的组件，甚至可以使用状态。