Is there a way to customize the mark style in Bootstrap?

I've gone through numerous articles on this issue, but I'm still unable to resolve it. My goal is simply to eliminate the padding that bootstrap automatically adds around the mark tag. This is important because I am dynamically changing highlights as the user types, and the text shifting can be quite disruptive.

Below is a snippet from my App.css file:

mark .query{
  padding: 0em;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-top: 0px;
}

Here is a section of the React code where highlighting occurs (utilizing Highlighter):

<Highlighter
                highlightClassName="query"
                searchWords={[this.props.query]}
                autoEscape={true}
                textToHighlight={result}/>

This is what gets rendered by React in HTML form:

<mark class="query ">Text</mark>

Into my project, I have imported CSS files for both Bootstrap and my custom styles:

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

Lastly, here are the computed styles reflecting the current situation:

https://i.sstatic.net/rnSVy.png

It's becoming quite frustrating! :)

cssreactjstwitter-bootstrapbootstrap-4

Answer №1

The Element you're aiming for is not the right one

This involves locating a <mark> element, and then choosing the child Element with the class query

mark .query { ... }

To target a <mark> that also has the class query, combine them both in your selector

mark.query { ... }

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

Creating a unique custom view in React Big Calendar with TypeScript

I'm struggling to create a custom view with the React Big Calendar library. Each time I try to incorporate a calendar component like Timegrid into my custom Week component, I run into an error that says react_devtools_backend.js:2560 Warning: React.cr ...

javascriptreactjstypescriptreact-big-calendar

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...

htmlcssionic-frameworkionic3scrollview

React - Unable to access variables that are not defined (trying to access 'params')

Someone else had a similar question regarding this tutorial, but unfortunately I am struggling with this more advanced section. An error occurred: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params') at fetc ...

javascriptreactjsreact-routerreact-router-dom

Deactivate the active class in a closed tab in Bootstrap 4

Eric G has provided me with a tab pane that can be toggled open and closed by clicking on a tab. However, now that the tab pane toggles open (using JavaScript to remove the active class), I also need to remove the active class from the tab itself. The .act ...

jquerytabsbootstrap-4bootstrap-tabs

Adding flair to a object's value in React JS

In my React JS file, I have a map function that I am using to populate a select dropdown with options. const options = response.map(k => ({ value: k.id, label: k.description ? `${k.name} - ${k.description}` : k.name, })); I ...

javascripthtmlcssreactjstypescript

Accessing state in a child component through props using "(this.props.(propName))" results in undefined value because of the usage of "This" keyword

Currently, I have a parent component that contains a state with a theme string. This setup is purely for testing purposes, so let's not delve too deep into its practicality at the moment! So far, here is the layout: The Parent Component holds the st ...

javascriptreactjs

Avoiding repetitive rendering of child components in ReactJS

In my React project, I have a parent component that contains 3 children components, structured like this: var Parent = React.createClass({ render: function() { return (<div> <C1/> <C2/> <C3/> ...

javascriptreactjs

Get rid of angular comments in an HTML document

Is it feasible to eliminate or deactivate the HTML comments generated by Angular? <ol class="items"> <!-- ngRepeat: item in list | orderBy:'time':true --> </ol> This is disrupting CSS rules that utilize the :empty pseudo c ...

cssangularjs

"Woops! An error occurred with the message: "SassError: Could not locate the specified target selector" while working with SCSS Modules and incorporating

Currently, I am working with Next.js and utilizing SCSS Modules. To incorporate Bootstrap into my project, I opted to install it using the command npm install bootstrap. Following this installation, I went ahead and created a new file titled common.scss wi ...

csssassnext.jsbootstrap-5

Removing a comma from a dynamic loop of Material UI Text fields in React can be achieved by accessing

Have a question for you, Currently, I'm utilizing React's material UI Text Field component, When I iterate through the text field from a dynamic array and update the default value sourced from that same array, the default value ends up includin ...

reactjsreact-nativematerial-uimaterial-design

Tips for positioning an inline label and input field in an Angular application using CSS and HTML: How to align the label to the left and the input

I'm currently developing an Angular form with multiple label-input field combinations. I have managed to style the labels and input fields with inline block so that they appear on the same row. However, I am facing a challenge in aligning the label to ...

htmlcssangular

Is there a specific instance where it would be more appropriate to utilize the styled API for styling as opposed to the sx prop in Material-

I am currently in the process of migrating an existing codebase to Material UI and am working towards establishing a styling standard for our components moving forward. In a previous project, all components were styled using the sx prop without encounteri ...

reactjstypescriptmaterial-uistyled-components

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

javascripthtmlcss

Buttons fail to function properly when inserted into Popover

I'm attempting to add 2 buttons to a popover triggered by the .clear-history button: <div class="modal-footer text-nowrap"> <button type="button" class="clear-history btn btn-link">Clear history</button> </div> const c ...

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-modal

In React, when utilizing the grid system, is there a way to easily align items to the center within a 5 by

I need to center align items within the material-UI grid, with the alignment depending on the number of items. For instance, if there are 5 items, 3 items should be aligned side by side in the center and the remaining 2 items should also be centered. Pleas ...

javascriptcssreactjsmaterial-ui

RectJs | Extract a parameter value from the url while disregarding any null values

Seeking assistance to retrieve the value of the "fruit" parameter from the URL in reactJs. Consider the following URL structure: http://localhost:3001/buy?fruit=&fruit=1&fruit=&fruit= Any of the four "fruit" parameters may contain a value, wi ...

javascriptreactjsurl

NuxtJS is unable to load multiple CSS sheets that contain variables

Currently in the process of creating a blog with NuxtJS. You can find my repository here. Additionally, I have raised this issue on the Nuxt repository as well, which you can view here. The main issue at hand revolves around loading style sheets in my con ...

javascriptcssstaticvue.jsnuxt.js

Tips for retrieving the ID of a dynamic page

In my Higher Order Component (HOC), I have set up a function that redirects the user to the login page if there is no token. My goal is to store the URL that the user intended to visit before being redirected and then push them back to that page. However, ...

javascriptreactjsreact-hooksnext.js

What steps should I take to resolve the npm error message "npm ERR! code ELIFECYCLE Exit status

I've encountered an issue with my project that was created using react-react-app. After attempting to update my dependencies recently, I'm now facing an error that I can't seem to resolve. I followed the steps that worked for others (deletin ...

reactjsnpmcreate-react-appnodemon

Utilizing Material UI to transmit information in ReactJS

Thank you in advance for your assistance. I am currently working on a web application that utilizes Reactjs and material-UI to showcase energy consumption data from various farms. My goal is to have the ability to click on a button on the main page and b ...

reactjsmaterial-ui