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 拼寫錯誤。 它的拼寫類名