css - 将自定义样式应用于 react 选择和最佳实践

Question

本质上，我想将我的输入字段的样式保持为 react-select 组件的样式。我了解到 styled-components 是最好的做法，但我仍然不确定要更改哪些样式才能获得我想要的结果。我想删除边框、聚焦发光并使其内联，同时保留其他所有内容。我会更改 .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 的许多组件的样式。您只需要定位正确的组件，您甚至可以使用状态。