使用 tailwindcss 设计反应选择组件

Question

我正在开发一个使用react、tailwindcss和react包react-select的项目。

我想要实现的目标：

用户可以从选择输入字段中进行选择。但是，如果选择输入字段没有合适的选项，用户可以手动输入答案。

为此，我正在使用

<CreatableSelect />

。

所有其他输入字段均使用 tailwind 进行样式设置，如下所示：

input, textarea, select {
  background-color: #f7fafc;

  @apply text-sm border-2 border-gray-200
  rounded-sm px-4 py-2.5 text-gray-800 tracking-wide focus-visible:outline-white
  focus:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2
  transition-all duration-300 ease-in-out;
}

我使用的反应组件看起来像这样：

export default function TypeaheadSelect() {
  const values = [
    { id: 1, name: 'Netflix' },
    { id: 2, name: 'Amazon Prime' },
    { id: 3, name: 'Hulu' },
    { id: 4, name: 'HBO' },
    { id: 5, name: 'Disney+' },
  ];

  const [selectedOption, setSelectedOption] = useState(null);

  const companyOptions = values.map(c => ({ value: c.id, label: c.name }));

  const handleChange = selectedOption => {
    setSelectedOption(selectedOption);
    console.log(`Selected Option: ${selectedOption.label}`);
  };

  const styles = {
    control: (base, state) => ({
      ...base,
      backgroundColor: '#f7fafc',
    }),
    option: (base) => ({
      ...base,
      color: '#2d3748',
      backgroundColor: '#f7fafc',
    }),
  };

  return (
    <div>
      <CreatableSelect
        className="customInput"
        options={companyOptions}
        onChange={handleChange}
        value={selectedOption}
        styles={styles}
      />

    </div>
  );
}

有没有一种巧妙的方法将输入、文本区域和选择中的 CSS 外观和触觉应用到 CreatableSelect？

这是目前为止的样子：

Answer 1

是的，有两种主要的方式来设计反应选择组件的样式。

1. 使用

   classNames

   道具
2. 使用

   components

   道具

使用

className

道具

结合

unstyled

道具查看这个故事=> https://github.com/JedWatson/react-select/blob/master/storybook/stories/UnstyledWithTailwind.stories.tsx

请注意，即使使用

unstyled

，仍然有一些 css 无法替换。

使用

components

道具

这将替换整个组件。

查看这个故事 => https://github.com/JedWatson/react-select/blob/master/storybook/stories/CustomInput.stories.tsx

要找出要替换哪个组件，请检查此渲染方法。

packages/react-select/src/Select.tsx