有没有办法在保持大部分原始风格的同时对反应选择进行风格化？

Question

我正在使用https://react-select.com/home#getting-started，我正在尝试创建尽可能接近此的内容：

我编码的 select 的原始样式（没有 select 库中的 customStyles 函数）给了我这样的结果：

但只要我开始添加styles（选择库中的customStyles函数），如下所示：

import { useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowDown } from 'react-icons/io';
// select input
import Select from 'react-select';

const ContextItem = ({ text, options }) => {
  const [treeNodeNames, setTreeNodeNames] = useState();

// THIS IS FROM THE LIBRARY
const customStyles = {
  option: (provided, state) => ({
    ...provided,
    // borderBottom: '1px dotted pink',
    color: state.isSelected ? 'white' : 'black',

  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  },
};
  useEffect(() => {
    if (options) {
      const treeNodes = options.data.findTreeNodesByTree.map((element) => {
        return {value: element.name, label: element.name  };
      });

      setTreeNodeNames(treeNodes);
    }
  }, [options]);

  return (
    <ContextContainer>
      <ContextTitle>
        <p> {text}</p>
      </ContextTitle>
      {treeNodeNames && (
        <SearchInput>
          <Select options={treeNodeNames} styles={customStyles} />
        </SearchInput>
      )}
    </ContextContainer>
  );
};

// STYLES
const ContextContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

const ContextTitle = styled.div`
  display: flex;
  width: 30%;
  align-items: center;
  justify-content: space-between;
`;
const SearchInput = styled.div`
  width: 60%;
  padding: 5px;
  outline: black;
`;

export default ContextItem;

我得到这样的东西：

所以问题是：如何使用 select 中的 customStyles 在不破坏所有内容的情况下达到第一张照片中显示的预期结果？有没有办法将原始反应选择的样式传递给并相应地修改它们。最后我只需要：

• 选择选项周围没有边框
• 选择选项移到右侧
• 同色
• 但选择或悬停时背景不同
• 单击所选输入字段时，边框颜色没有变化

我希望有道理，如果问题不清楚，请告诉我:) 感谢任何形式的帮助和线索。

Answer 1

您可以使用 styled-components，然后将基本组件用作您想要的 Select，然后根据需要更改有关它的特定内容

Here's 另一个关于此事的 SO 线程

有关此事的样式化组件文档https://styled-components.com/docs/advanced#issues-with-specificity

Answer 2

这个react-select组件由多个较小的部分组成。

您在应用自定义样式方面处于正确的轨道上。这是您可以自定义的various parts of react-select 列表。 语法：

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    color: state.isSelected ? 'red' : 'blue',
    // rest of styling
  })
}

例如，如果您想更改没有可用选项的文本，您将设置 noOptionsMessage 的样式。

其他注意事项：

1. 要访问 option 组件的 :hover 等伪类，CSS-in-JS 使用以下语法："&:hover": {...}。
2. 有关如何检查组件的伪状态并为其设置样式的更多详细信息here。

这是一个codesandbox，它的 react-select 样式接近您的第一张图片。