如何更改react-select Select元素的边框？
要更改react-select Select元素的边框，可以使用自定义样式来实现。react-select提供了一个名为"styles"的属性，可以用来自定义组件的样式。
首先，你需要创建一个样式对象，其中包含你想要更改的边框样式。例如，你可以使用CSS的border属性来更改边框的样式、颜色和宽度。
const customStyles = {
control: (provided, state) => ({
...provided,
border: '2px solid red', // 设置边框为红色，宽度为2px
borderRadius: '5px', // 设置边框圆角
}),
};然后，在react-select组件中使用这个自定义样式对象。
import Select from 'react-select';
const MySelect = () => {
return (
<Select
styles={customStyles} // 使用自定义样式
options={...} // 设置选项
...
/>
);
};通过这种方式，你可以根据自己的需求来更改react-select Select元素的边框样式。
关于react-select的更多信息和使用方法，你可以参考腾讯云的产品介绍页面：react-select产品介绍。
相关·内容
我想设置我的react-select组件的样式，使它看起来像下面的图像(与文本内联)。
我可以很容易地在跨度内使用普通的select组件并移除边框，如下所示：
<select disabled={readOnlyMode} style={{ border: 'none' }}>
<option default>Select response</option>
</select>
但是我想使用react-select来处理这个问题，但是我不知道我应该应用什么样式。
浏览 17提问于2021-03-10得票数 0
1回答
我想修改react-select上的边框。我使用的是props className，但实际发生的是创建一个新的边框作为包装器。 这是我的代码： import React from 'react'
import Select from "react-select"
const InputSelect = (props) => {
const { options, placeholder } = props
return (
<Select
options={options}
placeholder={plac
浏览 17提问于2021-10-02得票数 0
我正在使用react-select，我想知道如何让组件在所选标签前加上Show:或任何其他我想要的副本？我更喜欢将其烘焙到组件中，而不是更改标签。希望这是可能的。 额外的问题:如何轻松删除DropdownIndicator上的左边框线？它似乎根本不是指标的一部分。 ?
浏览 62提问于2020-09-23得票数 1
回答已采纳
如何更改react-select中所有元素的悬停？
<Select
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
源主机：
浏览 8提问于2019-08-01得票数 5
回答已采纳
我正在使用，并试图创建尽可能接近于此的内容：
我编写的select的原始样式(没有来自选择库的customStyles函数)给了我如下所示：
但是，当我开始从(customStyles选择库中添加 函数时，如下所示：
import { useEffect, useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowDown } from 'react-icons/io&#
浏览 3提问于2021-09-14得票数 2
既然我不能直接用react-testing-library测试内部结构，我该如何测试一个使用react-select的组件呢？例如，如果我有一个基于react-select值的条件呈现，它不呈现传统的<select/>，我仍然可以触发更改吗？
import React, { useState } from "react";
import Select from "react-select";
const options = [
{ value: "First", label: "First" },
{ val
浏览 2提问于2019-02-24得票数 15
回答已采纳
我在屏幕上有一堆react-select组件。它们都在一个名为bookData的类的div中。bookData的css是：
.bookData{
font-size:13px;
column-count: 2;
column-gap: 20px;
padding: 10px;
}
如果我用react-select选择了一些东西，选择就不会显示出来。如果我删除了column-count，我的react-select代码就会找到，它会选择项目并显示出来。有没有可以让react-select和column-count一起工作的css？
浏览 0提问于2018-12-12得票数 0
1回答
我在React-select中使用React-select，问题是在scoped slots中返回Select元素会破坏core-ui功能，比如搜索&排序
但是，如果返回带有文本的<label>或<p> ( Ex：<label>{item.status}</label> )，则工作正常。
问题
为什么Select破坏了功能？
任何解决办法/努力都会受到高度赞赏。
Note
我尝试过像<p hidden >{item.status}</p>这样的解决方案，然后呈现Select组件，但是它不起作用。
import Re
浏览 5提问于2021-02-10得票数 9
回答已采纳
8回答
react-select组件()选项样式的最佳方式是什么？
我可以很好地针对select本身，如下所示：
...
import Select from 'react-select'
...
const styles = {
fontSize: 14,
color: 'blue',
}
<Select
options={[1,2,3,4]}
placeholder={'Select something'}
clearable={false}
style={styles.select}
/>
问题是
浏览 11提问于2017-07-24得票数 46
回答已采纳
我在不通过NPM导入模块时遇到问题：
我创建了代码库，也尝试了本地安装，但没有成功，所以我尝试通过github进行安装。
我已经尝试过使用import和require，如下所示。我不太确定为什么它一直坚持在本地寻找
有问题的文件在utils文件夹中，这可能是它在那里搜索react-select的原因。
import Select from "@react-select/monorepo";
const Select = require("@react-select/monorepo");
工作方式(通过npm存储库安装时)：
import Select from
浏览 0提问于2020-06-12得票数 1
1回答
使用react-table和react-select created下拉列表并分配给表中的td，在最后一行中，下拉值没有显示，我的意思是隐藏在表下面。
浏览 1提问于2021-01-05得票数 1
2回答
使用react-select (React.js)，我注意到当单击select字段时，它显示出蓝色的颜色。
我说蓝色是因为它似乎也穿过了我给它的一些黄色边框，所以它看起来可能是绿色的。
这个颜色是怎样改变的？
我假设我需要正确的css选择器，我需要‘控制’样式键。对吗？
我已经设法为一般边框颜色和悬停时的边框颜色设置样式：
const SelectStyle = {
control: styles => ({
...styles,
border: `1px solid ${Colors.sec6}`,
"&:hover": {
浏览 1提问于2019-04-16得票数 2
我正在尝试使用react-select进行下拉列表。console.log将我的subjectList数组显示为object object、object、object...如果我不使用react-select，我的dropdown呈现得很好。我不知道问题出在哪里。下面是我的代码：
import React, {Component} from 'react';
import axios from 'axios';
import Select from 'react-select';
class Subject extends Component
浏览 56提问于2019-07-29得票数 0
回答已采纳
1回答
我目前正在尝试使用react-select设置选择框的边框颜色，我已经设法做到了这一点，但是由于某些原因，当我激活选择框并将鼠标悬停在选项上时，选择框的边框颜色默认为蓝色。我似乎找不到我需要在DOM中的什么地方来改变这一点。以下是问题所在： 当我悬停时，会显示正确的(橙色)边框颜色： ? 但是当我将鼠标悬停在这些选项上时，默认的蓝色就会显示在选择框周围。我希望它保持橙色： ? 下面是我的选择框的实现。 const customStyles = {
control: (provided: Record<string, unknown>) => ({
浏览 142提问于2021-07-21得票数 0
回答已采纳
从本质上讲，我希望将输入字段的样式与react-select组件的样式保持一致。我知道样式化组件是最好的方法，但是我仍然不确定要改变哪些样式才能得到我想要的结果。我想要删除边框，聚焦发光，并使它内联，同时保持其他一切。我是否要对.Select-menu-outer进行更改？
浏览 1提问于2018-04-18得票数 0
在我自己的例子中，我正在努力实现一个带有material ui的react-select版本。文档中给出的示例非常复杂。
当我试图复制代码时，我得到了以下错误
ERROR in [at-loader] ./src/public/components/select.tsx:13:37
TS2307: Cannot find module 'react-select/lib/components/containers'.
用于以下依赖项。
import { ValueContainerProps } from "react-select/lib/components
浏览 0提问于2019-07-03得票数 0
2回答
我知道如何使用react组件中的函数来获取我的后端，但我需要一个下拉菜单，所以我在react-select页面中找到了一个示例，但该示例是在类中创建的。 我在互联网上找到的干净的例子是，对于导入react-select，有必要运行npm install react-select命令 import React, { Component, Fragment, useEffect } from "react";
import Select from "react-select";
const options = [
{ value: "red"
浏览 15提问于2021-05-09得票数 0
回答已采纳
1回答
在react-select中，如果选择了value，我如何保持焦点边框颜色？
现在我有了以下配置
const selectCustomStylesCheckboxes = {
control: (base, state) => ({
...base,
boxShadow: state.isFocused ? 0 : 0,
borderWidth: 2,
minHeight: 50,
borderColor: state.isFocused ? "#707070" : base.borderColor,
"&
浏览 0提问于2020-04-17得票数 1
2回答
我想在Select中创建一个复选框，它只显示Select All Sites选项中的复选框。我如何实现它呢？
我正在使用react-select库作为下拉列表。
目前的行为：
我的代码：
预期产出：
有人能帮我吗。谢谢
浏览 4提问于2022-08-04得票数 1
我想改变选择的项目的颜色在反应选择。当前，选定的项目显示为蓝色。我想把颜色改成灰色
为此，我采取了以下步骤
创建了一个名为MyComponent.scss的文件
$grey：#999；..Select多个{..Select值{背景颜色：$grey；颜色：$grey；}}
然后将该文件导入到我的组件中。
import 'react-select/scss/default.scss';
import './MyComponent.scss';
我希望这将用我的$grey变量覆盖默认颜色。
但颜色仍然是蓝色。
浏览 1提问于2016-02-05得票数 3
我正在创建一个React应用程序并使用react-select。我正在尝试使用可创建的部分，但是当我导入它时，我得到了一个错误。 我安装了react-select和@types/react-select npm install --save react-select
npm install --save-dev @types/react-select 当我像文档上说的那样导入时 import Creatable from 'react-select/creatable'; 我得到了这个类型错误 Could not find a declaration file for mod
浏览 18提问于2019-06-27得票数 1
1回答
大家早上好,
我正在做react-select的实现，当react-select被打开时，我遇到了一个css问题，它位于一个容器中，带有overflow:auto (我不能改变它，因为它不是由我的应用程序创建的)。默认情况下，选项在容器内显示如下：
理想情况下，选项应该位于容器之外，如下所示：
我已经尝试了重写/react-select/less/select，并添加了一些自定义类，但没有成功。
谢谢你的帮助。
浏览 1提问于2018-03-12得票数 0
我使用的是react-select和TextField Material-UI。是否可以像在TextField中一样在react-select中设置helperText (组件下面的小文本 提前感谢您的帮助。 附言:我不认为我的问题是this question的重复。另一篇文章是关于如何自定义组件，这是react-select的一部分，我想添加一个react-select没有的选项。
浏览 63提问于2019-02-28得票数 3
回答已采纳
1回答
我有这样的代码： import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
const optionsExample = [
{
code: "CLP",
country: "CLP",
minimumAmount: 10000
},
{
code: "USD",
country: "US",
浏览 17提问于2020-11-30得票数 0
我有一个包含react-select字段的formik表单，所以我的问题是，我有另一个可能影响react-select组件默认值的字段和按钮，我尝试使用setFieldValue函数表单formik，但是这确实改变了表单值，但是没有显示select中的选项。
de codeSandbox我做了一个简单的例子来说明我要做什么
对此有何看法？
浏览 7提问于2020-06-15得票数 0
回答已采纳
我尝试使用react-select小部件，并将一个简单的字符串数组作为选项列表传递给它，而不是默认的{value, label}对象。我已经成功地将react-select配置为使用与默认属性不同的对象，因此我假设为普通字符串配置它将会很简单。但它不会，无论我选择哪一项，小部件中的可见选择始终保持为空。 我使用的是react-select 4.3.1，下面是一个简单的例子，展示了我所看到的行为： import React from "react";
import Select from "react-select";
const options = [
浏览 40提问于2021-10-03得票数 0
我能够以编程方式聚焦react-select，但不能选择输入字段中的文本。 我得到了对react-select的引用，如下所示： const selectRef = useRef()
...
<Select
ref={selectRef}
// other props
</Select> 然后： selectRef.current.focus()
selectRef.current.select() Select成功聚焦，但对于第二行(我相信是should work on an input element)，我得到： TypeError: selectRef.cur
浏览 45提问于2020-05-03得票数 2
回答已采纳
我正在使用库为下拉可搜索组件创建一个测试。
在自定义在data-testid中定义的组件时，我无法将该属性添加到Option组件中。
data-testid属性没有显示在DOMforOption元素中。
选项组件
import Select, { components } from 'react-select';
const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => (
<components.Option {...props} data-testid=&
浏览 11提问于2022-04-04得票数 2
回答已采纳
我使用了react-select库中的select元素，并且在我的项目中使用了styled component。我想问一下，是否可以在我的styles.ts文件中设置它的样式。如果不可能，你们能给出一些关于如何做造型的建议吗？？
在React中:FC
import Select from 'react-select'
...
const options = [
{ value: 'Income', label: 'Income' },
{ value: 'Expense', label: 'Expens
浏览 0提问于2020-07-10得票数 1
我在react-select中显示了一个选项列表。由于此组件位于屏幕的下缘，因此项目往往会从屏幕上被切断。
我注意到官方react-select中提供的选择列表有一个滚动条。我试着查看了文档和GitHub页面，但仍然找不到解决方案。
下图显示了我的react-select选项列表是如何显示的。
我的问题是，如何使显示的列表可滚动。
以下是我使用的代码。
import Select from 'react-select';
const SearchSelect = (props) => {
const { options, defaultValue, onC
浏览 5提问于2019-02-11得票数 4
回答已采纳
我正在学习react，并试图通过一个按钮更新react-select下拉菜单的state/selected值。单击该按钮时，将调用buttonClick()函数来设置新的状态值，但react-select状态没有更改。下拉列表中的选定标签保持不变。如何更改react-select的状态，使其显示新的选定值？谢谢。 https://codesandbox.io/s/react-select-test-nv8d8
浏览 71提问于2021-07-20得票数 2
回答已采纳
正在尝试使用React-Select进行设置。它在标准的React项目中工作得很好，但在Typescript React项目中工作得很好(两者都使用Create-React-App和webpack)。
在我的typescript项目中，它显示"Select“is not exported。我可以选择"SelectBase“，但它并不像预期的那样工作。
采取的步骤:我通过npm安装了react-select和@types/react-select。
在我的组件中，当试图从'react-select‘导入Select时，我在"Select“上得到了typescrip
浏览 0提问于2019-03-25得票数 3
我需要在一个类似于这个react-select的shadow-root web组件中使用。
如何从react环境中的onChange组件传递<Select>事件，以便在状态中使用它：
web组件：
import * as React from "react";
import ReactDOM from "react-dom";
// import { useState } from "react";
import Select from "react-select";
import retargetEvents fr
浏览 2提问于2022-03-01得票数 1
回答已采纳
1回答
我正在使用react和react-select，并尝试从api中获取选项。一切都在我身上工作，但我想展示的是，当数据来自api时，将文本加载到react-select中。 下面是我的react-select组件： <Select
onChange={this.getSelectedOption}
onFocus={this.getData}
options={options}
value={selectedOption}
styles={customStyles}
placeholder="Select...."
/>
浏览 19提问于2019-05-21得票数 1
是否可以控制React-Select 2的菜单位置？我在React Virtualized表行中使用它，但随后我将下拉框渲染到行外的门户。我已经将menuPosition设置为fixed，但是React-Select 2延迟了自动定位，这太慢了，所以我想自己控制定位。
浏览 2提问于2018-06-18得票数 3
我想将静态标题添加到react-select，它将出现在我当前选择的选项上方。
如何使用react-select来完成此操作？
谢谢您:)
浏览 1提问于2020-01-14得票数 1
我正在使用@material-ui/core - ^3.5.1。
在我的代码中使用了react-select - ^2.2.0。具有具有物料ui组件的自定义react-select。
我的问题是每次打开下拉列表时滚动位置都会重置。
所需的行为是它应该向上滚动到所选元素的位置。站点上的Example似乎工作得很好，但当我在codesandbox中打开给定的示例链接时，它却不工作。
，它是从material ui文档站点上给出的原始codesandbox示例链接派生而来的(此示例使用material-ui-4和react-select 3，但具有相同的问题)。在api文档中找不到此行为的任何可配置
浏览 0提问于2019-06-05得票数 6
我正在尝试将react Select包含到我的项目中，但是每当我使用时，我都会得到这个警告，然后是一个错误：
警告: React.createElement: type无效--需要一个字符串(用于内置组件)或类/函数(用于复合组件)，但是React.createElement: object。Uncaught : Element type无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got: object。
我这样用只是为了测试它：
import Select from 'react-select';
...
const options = [
浏览 3提问于2020-11-21得票数 0
回答已采纳
我在我的react应用程序中使用react-select dropdown组件。我发现了一个奇怪的问题，当用户开始在react-select下拉列表中输入搜索项目时，搜索文本框得到伸展，并且它不是一个固定的下拉列表。
请参见下图。如何将搜索文本框宽度固定为react-select宽度？
浏览 2提问于2017-07-05得票数 7
我正在使用React创建一个多步骤表单，其中一个步骤使用react-select。 父组件具有以下更改处理程序： const handleChange = input => e => {
setFormData({ ...formData, [input]: e.target.value});
} 它适用于我的大多数字段和步骤，但似乎不适用于react-select，因为react-select返回了一个对象。因此，我在父组件中编写了一个单独的处理程序，如下所示： const handleSelectChange = e => {
setFormData
浏览 17提问于2021-04-16得票数 0
3回答
我正在使用带有多选的React-Select组件。我面临的一个问题是，如果用户选择3个或4个选项，UI看起来相当糟糕，因为文本开始溢出，导致组件水平和垂直增长。
我希望有这样一种行为，即组件的大小保持不变，如果用户选择了更多选项，则只会显示"...“(省略号)，而不是尝试显示新选择的选项。
我想要的行为更符合这个组件
看看它是如何处理多选的。
我现在不想换掉组件，因为我们已经用React-Select做了很多测试。
你能给我一些关于如何在不删除react-select的情况下实现这一点的指南吗？
浏览 0提问于2016-02-02得票数 12
1回答
如何添加特定的分支/工作区
、、、、
我分叉反应-选择添加两个功能，目前的反应-选择不具备。我创建了一个分支，并将它提交给了我的分叉项目。现在，我想使用分叉的项目。
我试过安装分叉反应-选择回购以下方式，但没有成功。
yarn add @react-select/monorepo@<GithubUsername>/react-select#head=<Name of branch>&workspace=react-select
yarn add @react-select/monorepo@<GithubUsername>/react-select#commit=<commit#
浏览 6提问于2021-06-07得票数 1
React select (https://github.com/JedWatson/react-select)下拉列表在IE中未完全显示，但可在其他浏览器中使用。 ? 适用于其他浏览器。 我试着设置 .react-select__menu {
overflow-x:auto;
overflow-y:auto;
} 还尝试将react-select的位置设置为绝对和固定，并在菜单打开时将溢出设置为可见(不确定是否正确)。 同时设置菜单和它的子菜单列表的高度，似乎什么都不起作用。可以做些什么来修复它？提前谢谢。
浏览 22提问于2020-10-28得票数 1
2回答
我正在尝试为react-select改进我的UI。我在网上做了一些调查，但我仍然不知道如何删除选择栏中的栏。
我是否可以设置控件组件的样式以删除该栏？多么?
import React from 'react';
import chroma from 'chroma-js';
import { colourOptions } from './docs/data';
import Select from 'react-select';
const dot = (color = '#ccc') => ({
浏览 2提问于2019-01-05得票数 17
回答已采纳
我正在尝试写一个自动化脚本与量角器，将选择一个元素从一个反应-选择下拉菜单。但是，当我选择dropdown menu元素并使用.click()时，菜单不会打开。react-select下拉菜单似乎没有响应.click()调用。是否有其他方法可以调用react-select下拉菜单，它将单击菜单并打开它？
下拉菜单的代码。
<div className={ cx('select-container')} data-mr-ass='grey-info'>
<Select
classNamePrefix='info&#
浏览 1提问于2019-09-14得票数 0
...IE 11抛出TypeError的代码有什么问题:对象不支持属性或方法“赋值”.
import React from 'react';
import Select,{components} from 'react-select';
import { colourOptions } from '../react-select_Samples/data.js';
const Option = props => {
return ( <div>
<components.Option {...p
浏览 0提问于2019-05-02得票数 3
回答已采纳
如何改变箭头，并在react-select中放置一个三角形，当悬停时改变颜色？
<Select
styles={customStyles}
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
浏览 0提问于2019-08-02得票数 0
回答已采纳
3回答
我有一个简单的React组件，它获得一个初始状态：
this.state = {
currentObject: {
isYounger: false
}
}
然后，我使用默认值this.state.currentObject.isYounger呈现一个react-select
<Select
name={"age"}
value={this.state.currentObject.isYounger}
onChange={newValue => this.addIsYoungerValue(newValue
浏览 0提问于2019-04-02得票数 11
回答已采纳
我想在单击ClearIndicator按钮后立即模糊(从其中移除焦点) react-select中的控制字段。
我尝试使用一个自定义的ClearIndicator组件并为其定义一个onClick处理程序，但这似乎并不影响clear按钮的onClick行为。
是否有一种方法可以覆盖或修改ClearIndicator按钮的onClick行为，以便在单击Clear按钮时调用blur()方法？
我尝试的代码如下所示。
// react-select main component
<Select
components={{ ClearIndicator }}
isSearchable
浏览 0提问于2020-09-29得票数 0
我正在学习react，并且遇到了一些我无法理解的react-select行为。 我有一个react-select组件，它的值是从一个api调用中获取的。如果我使用defaultValue，则它不会从dropdown中选择值，但如果我使用value，则它会为dropdown选择值。 我只是搞不懂为什么defaultValue不能工作。 <Select
key={`dropdown`}
options={options}
onChange={onSelect}
defaultValue={defaultValue} /> 其中“options”作为道具从其他组件传递，
浏览 19提问于2019-03-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
