I am looking to customize the appearance of the outer ring on Material UI radio buttons.
https://material-ui.com/components/radio-buttons/
Currently, my radio button looks like this:
https://i.stack.imgur.com/o67mN.jpg
However, I would like it to look more like this:
https://i.stack.imgur.com/24Gx0.png
I have attempted to style the PrivateRadioButtonIcon-layer class in blue and the MuiSvgIcon-root class in black, but I am struggling to find a way to style the PrivateRadioButtonIcon-layer.
I will outline two solutions that are relevant to MUI version 5:
If your goal is to solely alter the border color without affecting its thickness, particularly in MUI 5, you can achieve this through the sx prop by following these steps:
'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)''& .MuiSvgIcon-root + .MuiSvgIcon-root'+) to access the second SVG element.The complete code snippet for Radio button customization:
<Radio
{...otherRadioProps}
sx={{
'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)': {
color: 'red',
},
'& .MuiSvgIcon-root + .MuiSvgIcon-root': {
color: 'blue',
},
}}
/>
Important Notes:
Border Thickness: While it's not possible to make the border thinner according to your design preferences, you can increase the border thickness through CSS alone. To manipulate the path element inside the SVG for the radio button's surrounding border, include the following in the sx prop:
'& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root) path':
{
stroke: 'red',
strokeWidth: 3,
},
https://i.stack.imgur.com/95Vyi.png
Note that despite setting the color: 'red' on the .MuiSvgIcon-root element, you still need to specify stroke: 'red',.
Directly targeting the circle using a class name isn't feasible due to Material UI assigning the same class name to both the border and circle elements, as depicted in this Firefox DevTools screenshot:
icon and checkedIcon ComponentIf you desire a thinner border, incorporating custom SVG icons via the icon and checkedIcon props becomes necessary. To achieve the desired look shown below:
https://i.stack.imgur.com/mb33R.png
You can implement the following icon component:
const RadioButton = ({ checked }) => (
<svg
width="38px"
height="38px"
viewBox="0 0 24 24"
fontSize="38px">
<circle
cx="50%"
cy="50%"
r="11px"
stroke="red"
stroke-width="1px"
fill="none"
/>
{checked && (
<circle
cx="50%"
cy="50%"
r="6px"
fill="blue"
/>
)}
</svg>
);
Integrate the custom icon component into your MUI Radio component like so:
<Radio
icon={<RadioButton />}
checkedIcon={<RadioButton checked />}
{...otherProps}
/>
1 - You are using the material UI tag like this:-
<FormControlLabel value="" control={<Radio />} label="" />
2 - Add a className to it and style the Radio tag as follows:-
<FormControlLabel className="targetInsideOfRadio" value="" control={<Radio style={{color: "#979797"}} />} label="" />
3 - Open the custom.css file and include the following CSS code:-
.targetInsideOfRadio > span > span > div > svg ~ svg > path {
color: #2149b9;
}
4 - Hopefully, this solution helps you find the answer :)
Attempting to incorporate the semantic-ui-react table reusable component from the Bit.dev community into my application. The link I am using is: To add this component to your application, use: npm i @bit/semantic-org.semantic-ui-react.table However, when ...
In my useEffect hook, I am splitting a string from the state by line break to create an array. The goal is to loop over this array and either add an object to my state/hook (messageContainer) with an id and a message property, like {id: i, message: messag ...
I am facing an issue with a series of divs generated from data, each containing an arrow that should toggle an expandable section. Strangely, only the first div is functioning properly: toggling the arrow icon and revealing the content upon click. When th ...
Struggling with a basic initial test in enzyme and Jest during unit testing. The "renders without crashing" test is failing, as depicted here: https://i.stack.imgur.com/5LvSG.png Tried various solutions like: "exclude": "/node_modules/" in tsconfig "t ...
In my quest to enhance the appearance of my website, I've been grappling with getting the background-image property to cooperate in CSS for the past three days. It's frustrating because I've successfully implemented this feature before, but ...
I have been working on a React application that utilizes the React-Azure-Maps npm package. My current challenge involves creating a weather layer, which I believe shares similarities with the sample code provided for layers. The code snippet responsible f ...
I'm working with a react-select component and I would like to implement a feature where an API request is triggered as soon as the user starts typing in the react-select field. This request should fetch items related to the keyword entered by the user ...
How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...
Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...
I have a unique combination of HTML and CSS code that creates an impressive login form: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Prepare to be amazed...</title> <l ...
Having applied CSS to a span element: font-height = 120px; height = 120px; line-height = 120px; The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundar ...
Recently, I've been experimenting with altering the appearance of a React-Slick carousel within my GatsbyJS project. Within my Slider component, I followed the official documentation by importing the library as shown below: import Slider from "re ...
Is there a way to utilize SASS variables in inline styles? export default function (): JSX.Element { return ( <MainLayout title={title} robots={false}> <nav> <a href="href">Title</a> ...
Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...
After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...
It seems that similar questions have been asked in multiple places, such as here, here, and many other posts. However, I will focus on the issues not addressed in those discussions. My setup consists of a create-react-app running on the same server as a N ...
I'm currently using redux, react-router, and Material-ui in my App development. I am facing an issue with displaying the details of an order. My requirement is that when a user clicks on a flat button, it should redirect them to a new URL. I have trie ...
Can children be aligned to the left when the parent is aligned to the center? I have a list of elements where the parent block should be centered, but the children need to align to the left. Now I found a solution to align the children to the center as w ...
Recently, I implemented the custom select box script from . This script allows for two select boxes, where the second one updates dynamically using AJAX when there is a change in the first select box. Below is a sample of the HTML code: <option>One& ...
I am currently working on a project that requires a unique CSS effect: Let me explain exactly what I am trying to achieve: The main element (referred to as the title) has padding and a 2px bottom border. Inside this, there is a child element (known as ti ...