使用相同的选择器之一但默认内容反应覆盖正确生成的 css class

Question

我应该提一下，我对反应还很陌生，而且还在摸索着去做。我在这里尝试做的事情可能超出了我的理解范围。

我正在尝试将 react-select 与来自 react-bootstrap 的浮动标签集成。因为 react-select 给了你很多对他们 CSS 的控制权，所以应该可以正常工作，而且大部分代码都可以工作。

但是，如果我将鼠标悬停在 select 上，我会看到一个无法摆脱的蓝色边框： Snip of the select being hovered

FF 开发人员控制台显示实际上有两个 css 语句完全相同 selector:

.css-knmecq-control:hover {
 border-color:#2684FF;
}

.css-knmecq-control:hover {
 border:none!important;
 border-color:red;
}

尽我所能，我无法摆脱（大概是默认的）第一个。具有讽刺意味的是，即使 FF 显示开发人员控制台中的第二个属性，它真正呈现的是第一个

developer console screenshot

问题源于另一个项目。我能够通过使用 npx create-react-app 创建一个新项目、安装 react-select、react-bootstrap@2.0.0beta.6 和 bootstrap 并粘贴相关的来重现它段代码放入App.js。此处未明确提及的所有内容均保留生成的默认值。

我的 package.json 中的依赖项部分如下所示：

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.6",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.1",
    "web-vitals": "^1.1.2"
  },

组件如下所示：

import Select from 'react-select';
import {FloatingLabel} from 'react-bootstrap';

const customStyles = {
    control: (styles, state) => {
        return {
            ...styles,
            border: state.menuIsOpen? 'none' : state.isDisabled ? 'none': state.isSelected ? 'none' : state.isFocused ? 'none' : 'none',

            top: '-10px',
            ':hover': { border: 'none !important',borderColor: 'red'}
        }
    }
}

const FloatingLabelSelect = (props) => {
    return (
        <FloatingLabel label={props.label} className={`${props.className} pb-3 `}>
            <Select options={props.options} className={'form-control mb-3'} styles={customStyles}/>
        </FloatingLabel>
    );
};

export default FloatingLabelSelect;

最后，是我完全不讨人喜欢的 App.js:

import {Container, FloatingLabel, Form} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import FloatingLabelSelect from './components/FloatingLabelSelect';


function App() {
  return (
      <Container>
        <Form>
              <FloatingLabel label={'Other stuff'}>
                <Form.Select as={'select'}>
                  <option disabled selected value>Not selected</option>
                  <option value="1" data-value="M">Male</option>
                  <option value="2" data-value="F">Female</option>
                  <option value="3" data-value="">None</option>
                </Form.Select>
              </FloatingLabel>
              <FloatingLabelSelect label={'Stuff'} options={[{value: 'red', label: 'Red'}, {value: 'blue', label: 'bleu'}]}/>
        </Form>
      </Container>
  );
}

export default App;

注意： 是的，代码片段显示了我日益增长的愤怒并带有大锤的伤痕。请原谅我。我希望您看到它完全处于我所有不成功的修复尝试所留下的状态。

Answer 1

（我会在评论中写这个而不是回复但我没有“声誉”）

是否可以在页面中包含 link？

根据我在所附屏幕截图 (SS) 中看到的内容，可能“蓝色边框”可能不是“css border" 属性但它是其他一些 CSS 属性的结果，例如 "outline" 或 "box-shadow"，这通常是 ":focus" 期间的标准 UX 行为select 框上的事件。

无论哪种方式，根据您的开发工具屏幕截图，select 上的边框看起来 而不是 select 的问题，但我们可以通过查看 select 框的“计算属性”进行三重检查，以确认边框已正确设置为 none.

使用相同的选择器之一但默认内容反应覆盖正确生成的 css class

React overriding correctly generated css class with one of the same selector but default content

javascript

css

emotion

reactjs