Currently, I am tackling a project that involves utilizing react-bootstrap along with my own custom CSS for styling. Both are imported in my index.js file as shown below:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
Within my code, there is a div with the className of "select". The objective is to decrease the font size of the h2 element within this div compared to its default size under Bootstrap.
To achieve this, I import React and useState from 'react' along with various components from react-bootstrap like Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Row, Col, and 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>
)
}
In order to make changes to the h2 elements within the "select" class, I attempted to adjust the font-size using the following CSS snippet from app.css:
.select h2, span{
font-size: 10px!important
}
Despite my efforts, it seems that this CSS rule is not overriding the default font size of the h2 elements. Interestingly, adding an exclamation mark to the value (e.g., 10px!) modifies the vertical alignment of the spans but does not affect the text size within them. If anyone could provide guidance on what might be incorrect in my approach, I would greatly appreciate it.