如何自定义 react-select 组件？答案

【问题标题】：How to customize react-select component?如何自定义 react-select 组件？
【发布时间】：2021-12-29 03:21:59
【问题描述】：

我对@987654326@ 组件重新设计有一点问题。如果您查看他们的official doc，您会看到所有可以重新设置样式的属性。我遇到的问题是我写的文字周围有蓝色边框，无法删除它们。也在容器周围。

如果我检查它，这就是我得到的：

它的 id 为 react-select-3-input，即使我直接在 chrome 检查上写也无法删除它，更不用说在代码中这样做了。

我使用 nextjs 作为框架，我添加了一个文件 style.css 并将其导入到_app.tsx。我尝试添加它以查看会发生什么：

#react-select-2-input {
  background-color: red;
  color: red;
  font-size: 40;
  background-color: red;
}

但什么也没发生。

你认为我可以如何解决这个问题？

【问题讨论】：

标签： css reactjs next.js styles react-select

【解决方案1】：

如果您阅读 react-select 的文档，您会发现文档引导您使用情感而不是直接的 CSS。

在实现这一点时，您的工作应该是这样的：

const reactSelectStyles = {
    singleValue: (provided, state) => ({
        ...provided,
        color: 'inherit',
    }),
    menu: (provided, state) => ({
        ...provided,
        'z-index': 9,
    }),
    multiValue: (provided, state) => ({
        ...provided,
        color: state.isDisabled ? "#000" : "#fff",
    }),
};

这将创建一个对象，然后您可以将其用于样式

<Select
    styles={reactSelectStyles}
/>

上面的代码中提供了确保包含默认样式（因此您可以根据需要省略它），并且该状态可用于根据 react-select 的状态渲染不同的样式。

我想说，总体而言，使用常规 CSS 解决这个问题会比较困难，因为 react-select（使用情感）会生成不会相互冲突的动态 CSS 类。

【讨论】：

当然我对其他部分也是这样做的。我的问题是您可以在文本周围看到的蓝色框。我无法通过情感访问它，所以我尝试使用经典的 css。问题是即使使用 Chrome 的检查，我也无法访问它。