Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected.

https://i.stack.imgur.com/btSc2.jpg

HERE IS THE CODE FOR MY MUI BUTTON SO FAR

import * as React from "react";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";

export default function RowRadioButtonsGroup({label1, label2}) {
  return (
    <FormControl>
      <RadioGroup
        row
        aria-labelledby="demo-row-radio-buttons-group-label"
        name="row-radio-buttons-group"

        style={{display: 'flex', gap: '2rem'}}

        sx={{
    '& .MuiSvgIcon-root': {
      fontSize: 28, 
    },
    
  }}
      >
        <FormControlLabel value="Sunday" control={<Radio />} label={label1}/>
        <FormControlLabel value="Monday" control={<Radio />} label={label2} />
      </RadioGroup>
    </FormControl>
  );
}

Answer №1

To create a customized form control label, utilize the "useRadioGroup" hook button and select preferred colors for the checked and unchecked states. Check out this demo to see it in action:

Customized Form Control Label Demo
// Styled form control label

const StyledFormControlLabel = styled((props) => (
    <FormControlLabel {...props} />
  ))(({ theme, checked }) => ({
    ".MuiFormControlLabel-label": checked && {
      // Customize color here
      color: "green"
    }
  }));

// Custom FormControl
 
   function MyFormControlLabel(props) {
     // MUI UseRadio Group
    const radioGroup = useRadioGroup();

    let checked = false;

    if (radioGroup) {
      checked = radioGroup.value === props.value;
    }

    return <StyledFormControlLabel checked={checked} {...props} />;;
  }



 

  <MyFormControlLabel value="male" control={<Radio />} label="Male" />

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

React's useState function causes the entire application to crash

Currently, I am working on setting up a basic menu using ASP.net core 2.1, Typescript 3.2.1, material-ui 3.8.3, and React 16.7.0. However, upon running the application, it crashes at the line containing useState showing the error message as TypeError: reac ...

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 ...

Sort through data based on specific data fields upon the button click event using JSON and Vue.js

Is there a way to use JSON files in Vue.js to filter data based on category when a button is pressed? I have objects with categories inside the data. portfolio-v1.json { "data":[ { "image_path":"static/products/DEL ...

Guide to selecting an element with a combination of text and a random number using Selenium with JavaScript

<a id="Message4217" class="btn-sm btn-danger Message" data-id="4217"><span class="icon-adjustment icon-trash"></span> Delete</a> The objective is to remove a message base ...

Transmit information from an IONIC 3 application to a PHP server using the POST method

Having trouble sending data from Ionic 3 to php via the http library using post? When php tries to retrieve it, it's unable to locate. Below is the Typescript file that generates the token to be sent to php and calls the php file on localhost (xampp) ...

Navigate to a particular date with react-big-calendar

I know this might sound like a silly question, but I am new to working with React. Currently, the React-big-calendar allows users to navigate to specific dates when selected from the Month view. What I want is for the same functionality to apply when a use ...

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

Tips for changing the default border color of a select element after it is clicked on

I have set up a basic select dropdown using mui. When clicking on it, I want to change the default color to grey instead of the blue provided by mui. <Box sx={{ minWidth: 120 }}> <FormControl> <Select id=& ...

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

What is the best way to send a function along with personalized data?

Currently, I am working on a project using node.js with socket.io. I am looking for a way to have socket.on() use a unique callback function for each client that joins the server. Here is my current technique: I have created a simple JavaScript class whi ...

Remove all input fields within an HTML file using a TypeScript method implemented in an Angular 2 component

Within my Angular project, there are several input elements in the HTML file that are not enclosed within a form tag. I am looking to create a function in the TypeScript file that will clear all of these inputs. I attempted to utilize ViewChild, but it a ...

Generating pop-up upon loading with CSS3

I have searched through numerous threads and forums in the hopes of finding a solution, but I haven't been successful. My issue lies with triggering a popup on my website. I followed online tutorials to create a popup window, which I was able to do su ...

Transferring an object from the factory to the controller

I'm currently working on setting up a factory that sends an ajax request to an API and then returns a data object. Here is the code snippet I have written: app.factory('Test', function($http, $q) { var data = {response:{}}; var getM ...

Leverage the power of JavaScript validation combined with jQuery

Hello, I'm relatively new to the world of Javascript and jQuery. My goal is to create a suggestion box that opens when a user clicks on a specific button or div element. This box should only be visible to logged-in users. I have some knowledge on how ...

The value in the textarea will stay unchanged even after the form has been submitted

I recently resolved my previous issue, but now I am seeking advice on how to prevent a textarea from clearing its input after submitting a form. You can view the jsFiddle here: http://jsfiddle.net/rz4pnumy/ Should I modify the HTML form? <form id="for ...

Autocomplete Data Origin

I'm currently exploring the use of Typeahead and implementing AJAX to fetch my data source: $(document).ready(function() { $('input.typeahead').typeahead( { hint: true, highlight: true, m ...

Encountered a SyntaxError in vue + webpack regarding an invalid range in character class

I am currently using webpack 4.29.3 and vue.js 2.6.3 to create a simple hello world project. I expected the index.html file to render correctly, but I encountered an error: SyntaxError: invalid range in character class. This error is confusing because I&ap ...

The class "slick" in <col class="slick"> does not add any styling or effects

My interpretation of the col element is that it can be used to assign a class to all elements in a column of a table. However, I am experiencing difficulties with this approach. While I am able to apply the class to individual td elements, I am looking for ...

Creating a personalized fake database functionality in Angular

Is there a way to implement the fake-db feature in Angular while utilizing this resource? I need it to support an API response structure like the one below for list retrieval. // GET 'api/outlets' { data: [ {'id':1, 'name&ap ...

What could be causing the issue where only one of my videos plays when hovered over using UseRef?

I'm currently working on a project where I have a row of thumbnails that are supposed to play a video when hovered over and stop when the mouse moves out of the thumbnail. However, I've encountered an issue where only the last thumbnail plays its ...