CSS is not overriding React-Bootstrap and Bootstrap as expected

Question

I am working on a project where I am using react-bootstrap but also my own custom css for styling. I import both in my index.js as follows:

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

Then I have an div that I give the className of select. My goal is to make the h2 in that div smaller than it would be under bootstrap.

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>
    )
}

I have removed some of the code the above component to make it shorter and easier to read. There was about 100 lines of code from dropdown items. In the below CSS from app.css I am trying to adjust the height of the h2 within the select class.

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

However, this css is not overriding the size of my h2s. Oddly enough, if I add ! to the 10px, it will adjust the vertical alignment of my spans, but not the size of the text within them. Would anyone be able to help me understand what I am doing wrong?

Answer 1

Hello I saw your code but I think you didn't write important with the exclamation sign

Please find the code below:

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

Answer 2

It turns out the issue was that classame spelled wrong. Its spelled className