Tips for customizing the appearance of ToggleButton in material-ui

Currently, I'm working on customizing the ToggleButton in order to change the default color when it is selected. However, my attempts have been fruitless so far.

const customizeStyles = makeStyles((theme) => ({   
  toggleButtonSelected: {
      "background-color": "red"
  }
}))

.......
<ToggleButtonGroup exclusive>
    <ToggleButton
        classes={{ selected: customizeStyles.toggleButtonSelected }}
        value="a" >
        Button A
    </ToggleButton>
    <ToggleButton
        classes={{ selected: customizeStyles.toggleButtonSelected }}
        value="b">
        Button B
    </ToggleButton>
</ToggleButtonGroup>
cssreactjsmaterial-ui

Answer №1

Solution

Consider updating your makeStyles styling as shown below:

const useStyles = makeStyles((theme) => ({
  toggleButtonSelected: {
    "&.MuiToggleButton-root": {
      "background-color": "red"
    }
  }
}));

https://codesandbox.io/s/material-ui-style-togglebutton-d235u?file=/src/App.js

Explanation

https://i.stack.imgur.com/0tZwh.png

Your original makeStyles styling is not effective because it creates a CSS rule with selector of 

.makeStyles-toggleButtonSelected-1
(highlighted in red in the above image), which gets overridden by another rule with higher specificity.

The updated makeStyles styling generates a CSS rule with a selector that has higher specificity compared to your original styling (highlighted in red in the image below). This revised styling is able to successfully override the default styling.

https://i.stack.imgur.com/01VbP.png

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

Guide on mocking Material-UI withWidth HOC

If I have a component wrapped in Material-UI's withWidth HOC, how can I use jest to mock withWidth's isWidthUp function and make it return a specific boolean value? System Under Test (SUT) import React, { Component } from 'react'; imp ...

reactjsmockingmaterial-uijestjs

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui

Ensuring the Persistence of Column State in Material-UI DataGrid/DataGridPro when Adjusting Visibility Using Column Toolbar

We have integrated MUI DataGrid into our React project. Currently, I am exploring options to save the state of columns after toggling their visibility using the DataGrid toolbar column menu. After each re-render, the column setup returns to its default st ...

javascriptreactjsmaterial-uidatagrid

Transferring files and information using the Fetch API

I am currently working on a React application and I have defined the state of my application as shown below: const [book, setBook] = useState({ title: '', cover: {} numberPages: 0, resume: '', date: date, }); The & ...

javascriptjsonreactjs

If the user is not currently logged in, refrain from attempting to elicit a reaction from them

Well, this question may appear to be quite straightforward. I did some research on Stack Overflow to find if someone else had a similar question, but it turned out that there weren't any. My tech stack involves React for the front end and a NodeJS ba ...

node.jsreactjsexpress

Is there a way to persist input values in React Material UI's multiple select component even after the page refreshes or reloads?

I have a React Material UI multi-select feature in my application that displays a list of venues. Users can select multiple venues from this list. However, whenever I refresh the page after making selections, all my chosen venues disappear and the selected ...

reactjsmaterial-ui

Box size adjusts to fit its content, including any form fields

Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...

csscss-grid

Exploring the dimensions of checkboxes in Fluent UI Northstar

Is there a specific method for controlling the size of checkboxes in Fluent UI Northstar? My attempts to modify the font size and height have only impacted the label, not the checkbox itself. Unfortunately, I couldn't find any guidance on this in the ...

cssreactjscheckboxfluentui-react

Tips for utilizing CSS flexbox to create a row of squares that can scale while maintaining their aspect ratios

Struggling with this issue has me on the verge of pulling my hair out. It seems like a simple task, yet I can't seem to achieve perfection. My goal is to create a row of squares that maintain their aspect ratio but scale down in size as their containe ...

htmlcssflexboxcss-gridresponsive

Implementing jQuery during the navigation between Node routes

Below is a snippet of my jQuery code: $(function () { $('.mnav a').click(function () { el = $('.border'); el.addClass('blink'); el.one('webkitAnimationEnd oanimationend msAnimationEnd animatio ...

javascriptjquerycssanimation

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

Arrow function utilized in string rendered component

Hello everyone, I could use some help with the following code snippet: rowRenderer = (e) => { debugger; return e.data?.fileName ? '<a class="documentLink" onclick={() => \'' + console.log('\ ...

javascriptreactjsag-grid

Title Bar: Excessive gap; inaccurate navigation to nearby link

I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page. No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It ...

htmlcss

Guidelines for Implementing Stylesheets from a Referenced Node Module

I am currently developing a VS Code module that incorporates highlight.js to produce HTML for syntax highlighting of source code. Within the highlight.js npm package, there is a directory named styles containing various CSS files that I intend to utilize. ...

cssnpmvisual-studio-codevscode-extensions

Can you explain the functionality of icon maps (or charts)?

As I was exploring the source code of various websites, I noticed a common pattern - all the icons were stored in one image map. Upon further investigation, I discovered that each icon is referenced individually when needed. I came across a helpful article ...

htmlcssicons

Results don't align with search parameters

const searchClientes = (event) => { if (event.target.value === '') { getClientes(); return; } else { const searchTerm = event.target.value; const filteredClients = clientes.filter(cliente => { return cliente.nome ...

javascriptreactjsfirebasenext.js

Is it feasible to utilize the Next.js (App Router) Context API to access this context in every fetch request?

To perform database queries, I require some context information. The context functions are not accessible on the client side, so I have been passing this context as args whenever I call a server component. However, I am exploring more efficient ways to h ...

javascriptreactjsnext.jsfetchreact-context

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

Make sure PTable maintains a horizontal layout on any device with PrimeNG

When I view my Ptable on desktop or iPad, it looks like this: https://i.stack.imgur.com/ONqZV.png However, when I switch to a device like an iPhone X, it changes to this layout: https://i.stack.imgur.com/H2q7j.png I want the horizontal layout to displa ...

cssangularresponsiveprimeng