Unexpectedly, CSS is failing to override React-Bootstrap and Bootstrap as intended

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.

Answer №1

Hello there! I noticed a small error in your code - you forgot to include the exclamation mark after important.

Below is the corrected code:

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

Answer №2

The problem arose from a simple spelling mistake in the class name - it was written as "classname" instead of "className".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make sure that the element with a relatively positioned stays contained within the top container

While relative and absolute positioning can be useful, they have the drawback of taking elements out of the flow which can lead to restrictions in their usage. Recently, I came across one such restriction and I'm interested to see if there is a soluti ...

Unexpected Type Error: Unable to Assign 'Render' Property to Undefined

At the moment, I am encountering these specific issues: An Uncaught TypeError: Cannot set property 'render' of undefined The element #main cannot be found This is the code that I currently have. Despite looking for solutions from various sourc ...

The callbackFinished function is not defined in the winwheel library

Every time I attempt to call a function with the callbackFinished property inside the animation of winwheel, I encounter an error stating that the function is not defined, even though it is defined in the same class. import React from 'react' imp ...

Creating a custom style that exclusively targets TableCell elements within the Table body

I'm working on creating a unique table layout in react using material UI. The goal is to have the rows in the table display without lines separating them, except for the row between the table head and body. I've tried removing the bottom border f ...

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

Creating a unique card component with React and custom Tailwind CSS styling

I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...

Error Message: A key is being provided to the classes property that is not implemented in the current context

Trying to customize Material-UI styles with makeStyles() as outlined in the documentation but encountering a warning when passing a classname in the parent component that is not specified in useStyles. The warning message reads: Warning: Material-UI: th ...

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

Ways to enable JavaScript code to accept input from both a text field and a text

I have a JavaScript code that allows users to input text and choose to make it bold, italicized, or underlined. For example, if the user checks the bold option, the text will appear in bold format. Here is the JavaScript code I am using: $('input[n ...

How can I simplify the CSS properties for this border?

I created a div named "commentbox" and I want to apply a border with the color #ccc. However, I only want the left, top, and bottom sides of the div to be bordered, leaving the right side untouched. Thank you! ...

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

I'm having trouble articulating this query without it becoming multiple issues, leading to closure. Here is my approach to passing components with hooks and rendering them based on user input. I've stored the components as objects in an array an ...

Redux does not have the capability to insert an object into an array

I'm currently learning about redux and I've encountered an issue trying to add multiple objects into the initialState array. I attempted using the push() method, but it isn't working as expected. The submitter value is being passed to my act ...

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

Tips for executing an npm command within a C# class library

I am currently developing a project in a class library. The main objective of this project is to execute a JavaScript project using an npm command through a method call in C#. The npm command to run the JavaScript project is: npm start The JavaScript ...

Generatively generating a new element for the react application to be mounted on

I am looking to enhance my JavaScript application using React by creating a build. Currently, the application consists of just a single file structured as follows. This file essentially creates a div element and continuously changes the color of the text & ...

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides? Both Blogs and History have dropdown menus. Check out this screenshot: https://i.sstatic.net/2kvTm.png (source: gyazo.com) CSS: .navbar ul { list-styl ...

What could be the reason behind Flex making several images decrease in size?

I'm trying to set up a carousel of images with Tailwind CSS, where 5 identically sized images are displayed next to each other and can be scrolled left and right. When I imported the images without using Flex, they fit the max-width that I had specifi ...

Issues with receiving POST requests in MERN stack application

For my first application using the MERN stack, I implemented logging of HTTP requests with "morgan". The data successfully gets sent to mongodb but the post request is stuck on "pending" for 4 minutes before failing. In my code snippet from "server.js": ...

Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here. Is there a way to reposition the chat icon higher on the page? I ...