CSS 没有按预期覆盖 React-Bootstrap 和 Bootstrap

Question

我正在开发一个项目，在该项目中我使用 react-bootstrap 以及我自己的自定义 css 样式。 我在 index.js 中导入两者，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

然后我有一个 div，我给了 select 的 className。 我的目标是使该 div 中的 h2 小于引导程序下的 h2。

import React, {useState} from 'react' import {Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Row, Col, Container } from 'react-bootstrap'

export default function RatingSelection() {
    const [firstOpen, setFirstOpen] = useState(false)
    const [secondOpen, setSecondOpen] = useState(false)
    return (
        <div classame='select'>
            <h2 >Compare ratings for 
                <span>
                    <Dropdown
                    className='inline-drop'
                    isOpen={firstOpen}
                    toggle={firstOpen}
                    size="lg"
                    >
                         <Dropdown.Toggle variant="info" id="dropdown-basic">
                            select a rating
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                        <Dropdown.Item>
                            Chess.com: Bullet
                        </Dropdown.Item>
                        </Dropdown.Menu>

                    </Dropdown>
                </span> 
                and 
                <span>
                    <Dropdown
                    className='inline-drop'
                    isOpen={firstOpen}
                    toggle={firstOpen}
                    size="lg"
                    >
                         <Dropdown.Toggle variant="info" id="dropdown-basic">
                            select a rating
                        </Dropdown.Toggle>
                        <Dropdown.Menu>
                        <Dropdown.Item>
                            Chess.com: Bullet
                        </Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </span> 
                
                </h2>
                    
        </div>
    )
}

我已经删除了上述组件的一些代码，使其更短且更易于阅读。 下拉项中大约有 100 行代码。 在下面来自 app.css 的 CSS 中，我试图在选择类中调整 h2 的高度。

.select h2, span{
  font-size: 10px!important
}

但是，这个 css 并没有覆盖我的 h2s 的大小。 奇怪的是，如果我添加 ! 到 10px，它将调整我的跨度的垂直对齐方式，但不会调整其中文本的大小。 谁能帮助我理解我做错了什么？

Answer 1

你好，我看到了你的代码，但我认为你没有用感叹号写重要的

请在下面找到代码：

.select h2, span{ font-size: 10px !important }

Answer 2

事实证明，问题是 classame 拼写错误。 它的拼写类名