reactjs 改变边框颜色在悬停和活动选择元素与Ant Design

yzuktlbb  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(194)

我想更改Ant设计库的Select组件的边框颜色

import { Select } from "antd";

    <Select
      mode="tags"
      style={{
        minWidth: 200,
        maxWidth: 500,
        margin: "1rem",
      }}
      placeholder="Catégories"
      onChange={handleChange}
      options={options}
    />

我尝试添加borderColor:样式属性中的“#ff7640”

import { Select } from "antd";

    <Select
      mode="tags"
      style={{
        minWidth: 200,
        maxWidth: 500,
        margin: "1rem",
        borderColor: "#ff7640"
      }}
      placeholder="Catégories"
      onChange={handleChange}
      options={options}
    />

但它不起作用。边框颜色似乎是由类.ant-select-selector的子div管理的,但即使通过添加,我也尝试添加

.ant-select-selector:hover {
   border-color: "#ff7640"
}

在css文件中,它仍然不工作...

zlwx9yxi

zlwx9yxi1#

您必须将border-widthborder-style相加,然后将className相加,如下所示:

<Select
      mode="tags"
      style={{
        minWidth: 200,
        maxWidth: 500,
        margin: "1rem",
        borderColor: "#ff7640",
        borderWidth: 1,
        borderStyle: 'solid',
      }}
      className="ant-select-selector"
      placeholder="Catégories"
      onChange={handleChange}
      options={options}
    />

如果仍然没有效果,请将!important添加到您的:hover边框颜色代码

相关问题