如何更改输入值周围的圆环样式 - React-Select

Question

我想在获得焦点时或选择/输入一个值并将其显示在我的 React-Select 组件的选择输入框中时消除光标周围的环。我可以使用 React-Select styles prop 更改大多数组件的样式，但不能使用环。

我尝试根据docs更改作为内部组件一部分的valueContainer的样式，但这似乎是包含占位符值等的父容器，

我尝试过的（在

styles

中）：

// both with and without baseStyles

 valueContainer: (baseStyles, state) => ({
   ...baseStyles,
   border: "none",
 }),
 singleValue: (baseStyles, state) => ({
  ...baseStyles,
  borderColor: "green",
 }),

我的代码：

                  <Select
                    className="w-1/3 mr-1"
                    options={generateDayOptions()}
                    value={selectedDay}
                    onChange={(selectedDay) => setSelectedDay(selectedDay)}
                    placeholder="Day"
                    styles={{
                      control: (baseStyles, state) => ({
                        ...baseStyles,
                        borderColor: "#6b7280",
                        borderRadius: "0px",
                        outline: state.isFocused ? "none" : undefined,
                      }),
                    }}
                  />

这是不需要的环的片段：

Answer 1

当控件组件悬停时删除其轮廓并删除其框阴影样式：

import React from 'react';
import Select from 'react-select';

const generateDayOptions = () => {
  return [{ value: 'Mon', label: 1 }];
};

export default function App() {
  const [selectedDay, setSelectedDay] = React.useState({
    value: 'Mon',
    label: 1,
  });

  return (
      <Select
        className="w-1/3 mr-1"
        options={generateDayOptions()}
        value={selectedDay}
        onChange={(selectedDay) => setSelectedDay(selectedDay)}
        placeholder="Day"
        styles={{
          control: (baseStyles, state) => {
            return {
              ...baseStyles,
              '&:hover': {
                outline: 'none',
              },
              boxShadow: 'none',
              borderColor: "#6b7280",
              borderRadius: "0px",
              outline: state.isFocused ? "none" : undefined,
            };
          },
        }}
      />
  );
}