What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue.

For instance:

<ButtonToolbar>
  <ToggleButtonGroup
    type="radio"
    name="options"
    value={...}
    onChange={...}>
    <ToggleButton ... />
    <ToggleButton ... />
    <ToggleButton ... />
  </ToggleButtonGroup>
</ButtonToolbar>

Instead of the current dark grey background for M/W/F as seen below, I am striving for it to be blue. Despite multiple CSS attempts, I haven't been successful so far. Thank you for any assistance!

https://i.sstatic.net/QsK13.gif

cssreactjsreact-bootstrap

Answer №1

To achieve this effect in CSS, simply incorporate the provided class and style rule below.

It is crucial to include !important in order to override any existing styles from the react-bootstrap library.

.Btn-Blue-BG.active {
  background-color: blue !important;
}

and

<ToggleButton className="Btn-Blue-BG" ...>

Check out the live demo here:

https://codesandbox.io/s/6nwkwnn29z

Answer №2

Have you attempted to include bsStyle="primary" in your code?

<ButtonToolbar>
    <ToggleButtonGroup
        type="radio"
        name="options"
        value={...}
        onChange={...}>
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
        <ToggleButton bsStyle="primary" />
        <ToggleButton ... />
      </ToggleButtonGroup>
    </ButtonToolbar>

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

Shining a Light on React JS

I recently implemented a spotlight feature using react js, but I encountered an issue where I am unable to click on the objects located below it. To address this problem, I attempted to use pointerEvents: 'none' in the styling, however, this caus ...

reactjsreact-propsspotlightreact-state-management

Manipulating state in React

Currently, I am enrolled in Samer Buna's Lynda course titled "Full-Stack JavaScript Development: MongoDB, Node and React." While working on the "Naming Contests" application, I encountered a piece of code within the App component that has left me puzz ...

javascriptjsonnode.jsreactjsaxios

The access token obtained through MSAL lacks group identification

How can I include group IDs in the access token retrieved using MSAL in my React web client? Here is how I currently retrieve the access token: const accessToken = await instance.acquireTokenSilent({ scopes: [ "https://graph.windows.net/Grou ...

reactjsazureazure-ad-msalmsal-reactmsal

Bringing in a variable from a React component to a JavaScript file

I've created a React component called Button with two states named name and players. Now, I need to access these states in a separate JavaScript file that is not a component. Below are the relevant code snippets: Button.js import {useState} from &qu ...

javascriptreactjscomponents

Tips for centering text in a react flexbox layout

Utilizing react-flexbox-grid in my project has led to the following layout: const SpicyMenu = (props) => ( <List> {props.foodItems.map(foodItem => <SpicyMenuItem key={foodItem.name} {...foodItem}/>)} </List> ); co ...

cssreactjsflexboxreact-flexbox-grid

What is the best way to move table data content to a new line?

I have a table that spans the entire width of the screen, with 3 <td> elements inside. The content in the 2nd <td> does not contain any spaces and is quite long, causing it to expand beyond its allotted 70% width and disrupt the layout. Is ther ...

htmlcss

Having trouble with Bootstrap 4 maintaining consistent width when affixing the sidebar

Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar ch ...

javascripthtmlcssbootstrap-4

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

javascripthtmlcssangular

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

cssangularangular-material2

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Before we delve into the details, I invite you to take a look at this fiddle using IE7. It's quite intricate and not something I want to repeat here. The main issue is that clicking on the red block should display additional information. The top row ...

cssinternet-explorerinternet-explorer-7

Is it possible to change a Material UI style without resorting to an HOC?

Is there any method to modify the styling of a Material UI component without the need to create an entirely new component using withStyles()? For example, if I am currently displaying the following and simply want to adjust the color of the "Delete" label ...

cssreactjsmaterial-uijsscss-in-js

Mastering Instagram Automation: Techniques for Navigating the Lightbox with Selenium

I am in the process of developing a Python script that assists users in Instagram engagement groups by efficiently liking everyone's photo during each round. I am facing an issue where Selenium is unable to click on the first photo when I reach a user ...

pythoncssselenium-webdriverinstagram

What is the best way to determine when the context value has been established?

Currently encountering an issue while trying to display a header. To achieve this, I begin by making an API call in InnerList.js and setting a list in context using the data from the API call. Next, in Context.js, I assign the list to a specific data set ...

javascriptreactjsreact-hooksreact-context

Guide to generating a dynamic manifest.json file for Progressive Web Apps using ReactJS

I am working on a project that requires me to generate a dynamic manifest.json file for my PWA (ReactJS). Below are the relevant code snippets: app.service.js: function fetchAppData() { const requestOptions = { method ...

javascriptreactjsreact-redux

Discrepancy in Bootstrap Navbar Brand and Links color appearance when attempting to change font and color across entire navbar

As a newcomer to CSS, I am facing an issue with my navbar. I want both the navbar brand and navbar links to be the same size and color. However, when I try to change the font and color of the entire navbar, only the font changes and the color remains incon ...

htmlcssbootstrap-4

Is it necessary to declare parameters for the super class constructor in Typescript React? If so, what would those parameters be?

I'm struggling to understand the specifics of the constructor in this code. Can anyone clarify what arguments the constructor for super() and constructor() should have? import * as React from "react"; import styles from "./ScriptEditor.module.scss"; ...

reactjstypescriptsharepoint-2010web-partssuper

What is the best way to extract a number from a string in JavaScript?

There are instances in HTML files where a <p> tag displays the price of a product, such as ""1,200,000 Dollar"". When a user adds this product to their cart, I want the webpage to show the total price in the cart. In JavaScript, I aim to e ...

javascripthtmlcss

Expo-app-auth encountering network error: Broken request in React Native

I've been working on implementing oAuth with the Spotify API in my React-Native app, but I keep encountering an error message that says ExpoAppAuth.get Auth: Network Error. I'm having trouble figuring out what's causing this issue and where ...

reactjsreact-nativeoauth-2.0expospotify

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

Steps for resetting the input ref in a Material-UI textfield

How can I clear the input of a text field after a specific action? I keep encountering an error stating "The value of the input element, required for a controlled component." const emailRef = useRef<TextFieldProps>(null); // Clear logic ...

reactjsmaterial-ui