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

A guide to filling an irregular shape (such as a star) based on a percentage using CSS in a React project

I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...

cssreactjsmaterial-uifont-awesome

The argument type does not match the parameter type partial<>

While attempting to validate my Ionic React form, I encountered an error when calling the validationSchema within the useForm method. The specific error message received is as follows: Argument of type '{ validationSchema: ......' is not assignab ...

javascriptreactjsionic-frameworkprogressive-web-appsionic-react

How can you utilize Material UI's `useMediaQuery` in the `/app` route of NextJs (13.4) in order to prevent flashing?

I've been working on a Next.js project and using the 'app' router to create a consistent layout for all pages. As part of handling responsive design, I incorporated Material-UI (MUI) and its useMediaQuery hook. However, when loading a page, ...

next.jsmaterial-ui

Accordion featuring collapsible sections

Looking to build an accordion box using Javascript and CSS. The expanded section should have a clickable link that allows it to expand even further without any need for a vertical scroll bar. Any ideas on how this can be achieved? Thank you ...

javascripthtmlcss

Tips for making inline elements match the line height

Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...

htmlcssblock

Prevent the need to go through the keycloak callback process each time the page is

I have integrated keycloak as an identity provider into my React application. I successfully added the keycloak react dependency via npm. Below are the versions of the keycloak react npm modules on which my application depends : "@react-keycloak/web ...

javascriptreactjsconfigurationkeycloak

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

javascriptcss

Updating to the latest version of Next.js will result in a modification of the API path

I recently updated my app to the latest version of nextjs (13.1.6) and encountered a problem where all my requests are now failing. It seems that the URL I specified in the request creator, based on the ENV value, is being overwritten. .env file CONST NEXT ...

javascriptreactjsnext.js

How to align CSS counters to the right within the ::before pseudo-element

Utilizing CSS counters and the <code> element to display syntax highlighted code snippets with automatic line numbering: JSFiddle HTML: <code> <div class="line"><span>line 1</span></div> <div class="line">< ...

htmlcss

Minimization tools for compressing CSS and JavaScript documents

After deploying my application, I noticed that the loading time has significantly increased. Is there a way to compress CSS and JS files? I include only the necessary code in each page and occasionally use minified versions of JS. Thank you. ...

javascriptcsscompressionminifyjscompress

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

I am facing an issue where adding body tags to my code in Visual Studio code does not yield the desired results. Interestingly, it doesn't seem to be a syntax error in CSS. body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI&apo ...

htmlcss

How can I show the real width of an image on a mobile device?

I have integrated the infinite slide plugin from jQueryscript.net into my website. While it works perfectly on desktop with background images, I am facing an issue on mobile devices where the image width needs to be displayed in full. I attempted to adjust ...

javascriptjqueryhtmlcssmedia-queries

Retrieve an image from a MongoDB database and display it in a ReactJS component

I am a beginner in mongodb and nodejs. I recently saved a post with text and an image to the mongodb database, but when trying to retrieve the information, the image is showing as undefined. This is the model for the post: const mongoose = require("mongoo ...

node.jsreactjsmongodbexpresslocalhost

Accessing the parent element within a hover declaration without explicitly naming it

I am facing a challenge with three nested divs, where I want to change the color of the children when the parent is hovered. However, I prefer not to assign a specific class name to the parent element. The issue arises because the children have their own ...

cssreactjs

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

htmlcss

transition from mapStateToProps to using hooks

Just dipping my toes into the world of React (hooks) and learning by writing code. I'm grappling with converting MapStateToProps to hooks, specifically stuck on one part just before 'currentItem'. Here's the original code snippet: co ...

javascriptreactjstypescriptreact-reduxreact-hooks

Having issues with CSS vertical margin not functioning properly

#outline { background: green; height: 96vh; width: 96vh; } #box { background: white; height: 86vh; width: 86vh; margin: 5vh; border: 1px solid #DDDDDD; overflow: hidden; } <div id="outlin ...

htmlcss

Icons are failing to display in the dropdown menu of MUI after an option is selected in ReactJS

There seems to be an issue with the icon in the select tag. Initially, it is not showing which is correct. However, when you click the dropdown, the icon appears as expected. But after selecting an option, if you click the dropdown again, the icon disapp ...

javascriptreactjsmaterial-ui

Ensure that the three.js script remains in a fixed position on a page that can be

Is there a way to make a 3D model created with three.js have a fixed position on a scrollable page, like a background while the rest of the content scrolls normally? Are there any CSS techniques or additional script elements that can be used to achieve thi ...

javascriptcsshtmlthree.js3d

Utilizing Auth0 in combination with ReactJS and Lumen, the specified audience appears as a unique and seemingly

I am in the process of developing an application with a ReactJS frontend and a Lumen backend. To ensure that only specific users can access the API, I have implemented Auth0 for authentication. Currently, JWT auth is set up in Lumen, and using postman, I ...

reactjslumenauth0