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。

从 'react' 导入 React, {useState} 从 'react-bootstrap' 导入 {Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Row, Col, Container }

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

您好，我看到了您的代码，但我认为您没有用感叹号写 important

请在下面找到代码：

.select h2, span{ 字体大小：10px！重要 }

Answer 2

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